⼩程序实现animation动画
⼩程序实现animation动画，具体内容如下
1. 创建动画实例
创建⼀个动画实例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
});
this.setData({
animation1: port()
});
let animation2 = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
});
animation2.opacity(0.7).step({ duration: 1000 });
this.setData({
animation2: port()
});html animation属性
}
2. 调⽤动画执⾏
2.1 绑定动画
将所创建的动画实例绑定到相应标签
⽰例代码
<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>
2.2 触发动画
通过页⾯事件调⽤动画执⾏
⽰例代码：
<view bindtap="touch"></view>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。