小程序筆記—動畫的同步執行與異步執行

小程序動畫執行的順序關鍵點在於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()
    })
  }