微信小程序实现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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
实例详解带参数的 npm script
May 28 Javascript
微信小程序实现watch监听
Jun 04 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
基于构造函数的五种继承方法小结
2017/07/27 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python之wxPython应用实例
2014/09/28 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
承诺书怎么写
2014/03/26 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
生产车间主任岗位职责
2015/04/08 职场文书