小程序 wx.createAnimation(Object object)使用方法

常规套路:
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)
  },