微信小程序动画Animation的实现及执行步骤

创建动画实例

  var animation = wx.createAnimation({
       duration: 200,  //动画的持续时间
       timingFunction: "linear", //	动画的效果设置为平均
       delay: 0  //动画延迟时间无
     })

调用animation实例方法来描述动画

this.animation = animation
animation.translateY(300).step(); //效果自己设定为主

最后通过动画实例export()方法导出动画数据传递给组件

 this.setData({
       animationData: animation.export()   //输出动画
     })

<view animation="{{animationData}}" class="drawer_attr_box"   //事例