小程序 简单的动画效果

//动画效果 https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html
// 示例1：实现的动画：把 view 放大两倍；
 <view animation="{{animationData}}"
     style="background:red;height:100rpx;width:100rpx"></view>

 onShow: function () {
 // https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
 //页面显示时创建动画实例
 //duration: 1000  动画用时1s
 //timingFunction: 'ease'：从头到尾的速度是相同的
 //1. 动画操作方法 scale() 放大两倍 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.scale.html
 //2. 调用 step() 来表示一组动画完成。
 //3.通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性(export 方法每次调用后会清掉之前的动画操作)
  this.setData({
    animationData: wx.createAnimation({
      duration: 3000,
      timingFunction: 'ease',
    }).scale(3, 5).step().export()
  })
 },

//示例2 把 view 向右平移
 // translateX() 平移属性
 // translateY()
 <view animation="{{animationData}}"
     style="background:red;height:100rpx;width:100rpx"></view>
 onShow: function () {
  this.setData({
    animationData: wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    }).translateX(50).step().export()
  })
 },