微信小程序实现animation动画
更新时间：2018年01月26日 11:16:45 作者：YSP易水寒
这篇文章主要为大家详细介绍了微信小程序实现animation动画的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现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中递归实现的方法及其区别，感兴趣的朋友一起看看吧2017-09-09
给政府做的，完全要求高，居然用硬盘序列号，MAC地址，CPU地址三项来绑定指定的人来操作。2008-12-12
这篇文章主要给大家介绍了关于JavaScript获取地址栏参数的方法实现,项目中经常遇到获取上个页面跳转过来获取当前的参数,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
一步一步封装自己的HtmlHelper组件BootstrapHelper（三）
一步一步封装自己的HtmlHelper组件：BootstrapHelper，系列文章第三篇，感兴趣的小伙伴们可以参考一下2016-09-09
使用do...while的方法输入一个月中所有的周日(实例代码)
下面小编就为大家带来一篇使用do...while的方法输入一个月中所有的周日(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
一个页面里面需要放一个iframe框架来预览网站，可是被预览的这个网站中含有很多js脚本，于是想禁止iframe里面的脚本，下面是方法2014-09-09
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去，偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。2010-06-06
这篇文章主要为大家详细介绍了js前端如何实现图片压缩上传的效果，文中的示例代码讲解详细，具有一定的学习价值，有需要的小伙伴可以参考一下2023-11-11
最近在做项目的时候,遇到了有四舍五入保留两位的需求,当时不假思索的直接使用了js原生的toFixed方法,结果出现了问题,这篇文章主要给大家介绍了关于JS中toFixed()方法四舍五入精度问题的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
最新评论