微信小程序实现animation动画


Posted in Javascript onJanuary 26, 2018

微信小程序实现animation动画,具体内容如下

1. 创建动画实例

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
注意: export 方法每次调用后会清掉之前的动画操作

动画队列

调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。 通过事件绑定动画即可调用动画执行。

创建的动画实例可以通过调用动画方法进行描述,调用结束后会返回自身,支持链式调用的写法。
在同一个动画实例内部,可以定义多种运动形式,并定义多个动画绑定到不同标签

示例代码:

animation1: {}
animation2: {}

touch: function () {
 let animation1 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
 this.setData({
  animation1: animation1.export()
 });
 let animation2 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation2.opacity(0.7).step({ duration: 1000 });
 this.setData({
  animation2: animation2.export()
 });
}

2. 调用动画执行

2.1 绑定动画

将所创建的动画实例绑定到相应标签

示例代码

<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>

2.2 触发动画

通过页面事件调用动画执行

示例代码:

<view bindtap="touch"></view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
JsDom 编程小结
Aug 09 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
微信小程序如何获取用户手机号
Jan 26 #Javascript
Vue header组件开发详解
Jan 26 #Javascript
Vue shopCart 组件开发详解
Jan 26 #Javascript
jquery写出PC端轮播图实例
Jan 26 #jQuery
深入理解vue中slot与slot-scope的具体使用
Jan 26 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
详解Angular2 之 结构型指令
2017/06/21 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
python3调用windows dos命令的例子
2019/08/14 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python环境下安装opencv库的方法
2020/03/05 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
python 如何调用 dubbo 接口
2020/09/24 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
生日寿宴答谢词
2014/01/19 职场文书
中学生自我评价范文
2014/02/08 职场文书
省文明单位申报材料
2014/05/08 职场文书
冬季施工防火方案
2014/05/17 职场文书
任命书格式范文
2015/09/22 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
深入理解python协程
2021/06/15 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS