需要使用 wx.createAnimation({}) 创建一个动画实例 animation 调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
大部分的动画实例上的方法都是设置动画样式,他们返回的还是动画实例对象本身,所以我们可以采用链式写法。需要注意animation.step() 和 animation.export() 两个方法
- step() 表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画
- export() 导出动画队列。**export 方法每次调用后会清掉之前的动画操作**
data: {
myanimation:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var animation = wx.createAnimation({
delay: 0,
duration:2000
})
console.log(animation)
//表示动画 放大2倍 step表示一组动画结束
animation.scale(1.5,5).opacity(0.5).backgroundColor("#000").step()
//导出对应的动画数据
var arr = animation.export()
console.log(arr)
//将动画数据赋值给对应组件的animation属性
this.setData({
myanimation:arr
})
},