常规套路:
1.data 中声明动画:animation。data:{ animation:{} }
2.合适的时机创建一个动画实例animation。this.animation = wx.createAnimation({})
3.调用实例的方法来描述动画。简单点说就是设置各种动画属性值,例如:this.animation.rotate(150).scale(3)
4.调用动画操作方法后要调用 step()
来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,step和 wx.createAnimation() 配置参数相同;
5.最后通过动画实例的export
方法导出动画数据传递给组件的animation。就是动画输出啦,让他动起来
注意:export 方法每次调用后会清掉之前的动画操作
API
image.png
image.png
案例1
核心结构 index.wxml
<view animation="{{animation}}">我在做动画</view>
<button bindtap="rotateFn">旋转</button>
数据和逻辑 index.js
Page({
data: {
animation:{}
},
onReady: function () {
this.animation = wx.createAnimation({
duration:600,
timingFunction:'linear',
delay:500
})
},
rotateFn:function(){
this.animation.rotate(150).scale(3).step({ ducation: 8000 })
this.setData({
animation: this.animation.export() //输出动画
})
}
})
案例2
用定时器循环播放动画
效果如下:
GIF.gif
onReady: function () {
this.animation = wx.createAnimation({
duration: 100,
timingFunction: 'linear',
delay: 10,
transformOrigin: '50% 0 0'
})
},
onShow: function () {
let next = true;
setInterval(function () {
if (next) {
this.animation.scale(0.9).step();
next = !next;
} else {
this.animation.scale(1).step();
next = !next;
}
this.setData({ //输出动画
animation: this.animation.export()
})
}.bind(this), 500)
},