小程序动画执行的顺序关键点在于step,即动画执行步骤:
动画使用
<image style="width:80rpx;height:80rpx;" src="./float.png" bindtap="showAnimate" animation="{{animation}}"></image>
异步执行,即一起执行
showAnimate(e) {
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease-out'
})
//opacity、scale、translateY、translateX异步执行,即一起执行
animation.opacity(1).scale([2,2]).translateY(100).translateX(100).step()
this.setData({
animation: animation.export()
})
}
同步执行,即先后执行
showAnimate(e) {
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease-out'
})
//opacity、scale、translateY、translateX同步执行,即先后执行
animation.opacity(1).step().scale([2,2]).step().translateY(100).step().translateX(100).step()
this.setData({
animation: animation.export()
})
}