小程序笔记—动画的同步执行与异步执行

小程序动画执行的顺序关键点在于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()
    })
  }