详解微信小程序动画Animation执行过程

微信小程序是一种轻量化的应用程序，常用于展示性质较强的场景，并且它内置了易用且功能强大的动画组件Animation，下面我们就来详解一下这个组件的执行过程。

Animation的基本结构

在使用Animation时，我们需要先创建一个Animation实例，其结构如下：

var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  delay: 0,
  transformOrigin: '50% 50% 0'
})

其中各个属性的含义如下：

• duration：动画的运行时间，单位为毫秒，默认值为0。
• timingFunction：动画的运动方式，默认为'linear'，可以设置成'ease-in'、'ease-out'、'ease-in-out'、'step-start'或'step-end'等。
• delay：动画的延迟时间，单位为毫秒，默认值为0。
• transformOrigin：动画的操作中心，默认为'50% 50% 0'（即元素中心点）。

Animation的执行方式

在创建了Animation实例后，我们就可以通过调用Animation的方法，来执行动画，常用的有以下三种方式：

赋值给组件的animation属性

该方式适用于要对页面中某个组件进行动画效果的情况，在wxml文件中通过该组件的animation属性来绑定该组件的动画。示例如下:

<view animation="{{ animation }}"></view>

然后在js文件中，通过Animation实例的方法，对animation属性进行操作。示例如下：

animation.translate(100).step()
this.setData({
  animation: animation.export()
})

需要注意的是，当调用Animation实例的方法时，每次调用完毕后需要调用一次step()方法来动态更新当前的动画。

导出动画队列

该方式适用于多个组件需要同时进行动画效果的情况，可以通过调用Animation实例的export()方法，将动画队列导出为数组，然后在页面中通过animation属性进行绑定。示例如下：

animation.opacity(0.2).translateX(30).step()
animation.opacity(1).translateX(0).step()

this.setData({
  animationData: animation.export()
})

在wxml文件中，可以通过animation属性来绑定动画数组。示例如下：

<view animation="{{ animationData }}"></view>

需要注意的是，当通过导出动画队列方式执行动画时，如果每个动画的时间和延迟时间不一致，会存在动画跳跃的情况，可以在导出时设置动画队列的delay属性来解决。

使用回调函数

该方式适用于多个动画有先后顺序的情况，可以通过调用Animation实例的step()方法来将当前的动画添加到动画队列中，然后通过回调函数的方式，执行下一个动画。示例如下：

animation.translate(100, 50).step().rotate(45).step()

this.setData({
  animationData: animation.export()
})

setTimeout(function() {
  animation.translate(-100, 50).step().rotate(-45).step()

  this.setData({
    animationData: animation.export()
  })
}.bind(this), 1000)

在上述示例中，第一步先执行translate动画，成功后调用step()方法将其添加到队列中，然后接着执行rotate动画，并且同样将其添加到队列中。然后通过setData方法，将动画队列绑定到页面上。

接下来通过setTimeout延迟1秒执行下一步动画，即将元素移回原位置并且还原旋转角度，然后同样通过调用step()方法，将nextRotate动画添加到队列中，最后通过setData方法将动画队列绑定到页面上。

示例说明

下面通过两个示例，分别演示如何通过Animation实例执行动画。

示例1

在该示例中，我们控制了一个图片从左上角沿直线向右下角移动到中心点，并在到达中心点时进行旋转和缩小的动画效果。示例代码如下：

<!-- index.wxml -->

<view class="wrapper">
  <image 
    class="image"
    animation="{{ animation }}"
    src="../../images/logo.png"
    mode="aspectFit">
  </image>
</view>

// index.js

Page({
  data: {
    animation: null
  },

  onLoad: function() {
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 0,
      transformOrigin: '50% 50% 0'
    })

    animation
      .translateX(250).translateY(250)
      .rotate(360).scale(0.2).opacity(0.3)
      .step()

    this.setData({
      animation: animation.export()
    })
  }
})

在以上代码中，我们先通过createAnimation方法创建了一个Animation实例，然后通过调用它的translateX和translateY方法，实现了图片沿直线向右下角移动的效果。然后又分别调用了rotate、scale和opacity方法，实现了图片旋转、缩小和透明度变化的效果。最后通过调用step方法将所有动画添加到动画序列中，然后通过export方法将动画序列导出为一个数组，赋值给了页面的animation属性。

示例2

在该示例中，我们创建了一个不断上下跳动的图标效果，并且使用了连续动画和回调函数的方式实现。示例代码如下：

<!-- index.wxml -->

<view class="wrapper">
  <image 
    class="image"
    animation="{{ animation }}"
    src="../../images/logo.png"
    mode="aspectFit">
  </image>
</view>

// index.js

Page({
  data: {
    animation: null
  },

  onLoad: function() {
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 0,
      transformOrigin: '50% 50% 0'
    })

    this.animation = animation

    this.upAndDown()
  },

  upAndDown: function() {
    this.animation.translateY(-20).step()
    this.animation.translateY(20).step()

    this.setData({
      animation: this.animation.export()
    })

    setTimeout(this.upAndDown, 1000)
  }
})

在以上代码中，我们先通过createAnimation方法创建了一个Animation实例，并将它赋值给this.animation属性。在upAndDown方法中，我们通过调用动画的translateY方法，实现了图片的上下跳动效果，并且通过连续调用step方法，将其添加到动画队列中。然后通过setData方法将该动画队列绑定到了页面组件的animation属性上。最后通过setTimeout方法，循环调用upAndDown方法，使图片不断进行上下跳动的效果。