WTF小程序之animation

目錄

• [animation 的幾個關鍵方法](#animation 的幾個關鍵方法)
  • [step 方法](#step 方法)
  • [export 方法](#export 方法)
• [如何實現 infinate 動畫](# 如何實現 infinate 動畫)

小程序的 animation 有一套怪異的 API，既不符合 css 的 keyframes，又不符合 DOM 的 API，可以說是一個四不像，所以很久以來，我是對這個 API 是有點排斥的，但是，在對 cover-view 中進行動畫的時候，還非得用這個 API 不可。因為對 cover-view 進行變換存在着一些 BUG

animation 的幾個關鍵方法

animation 實例由 wx.createAnimation 創建得到，支持的變換方法有:

Object.getOwnPropertyNames(wx.createAnimation().__proto__)

["constructor", "export", "step", "matrix", "matrix3d", "rotate", "rotate3d", "rotateX", "rotateY", "rotateZ", "scale", "scale3d", "scaleX", "scaleY", "scaleZ", "skew", "skewX", "skewY", "translate", "translate3d", "translateX", "translateY", "translateZ", "opacity", "backgroundColor", "width", "height", "left", "right", "top", "bottom"]

拋開這些控制變換的方法不談，我們要認識下面這兩個對傳統 DOM 來說相對陌生的方法：export 方法和 step 方法。

step 方法

step 方法在一系列變換之后調用，並且接受 4 個可選參數：duration, timingFunction, delay,transformOrigin，其他三個參數跟 css 沒啥區別，值得一提的是 duration 這個參數，它可以取值為 0，這有什么用呢？可以用來重置動畫到最初的狀態：

    this.animation.rotate(0, 0)
                  .scale(1)
                  .translate(0, 0)
                  .skew(0, 0)
                  .step({duration: 0}) // 設置 duration: 0 來使動畫回到初始狀態

那么這個 step 方法是做什么用的呢？它就好比是武術中的一 "招"，在這一招之內，所有的動作都是同步進行的。當 step 被調用時，之前調用的所有變換是同時進行的，step 調用后再變換就會被放到下一 "招" 中。試比較下面的兩段代碼的不同：

// 在一招之內，移動 100 的同時后空翻 180

this.animation.rotate(180).translateX(100).step({duration: 800})

// 第一招先移動 100，第二招后空翻 180

this.animation.rotate(180).step({duration:400}).translateX(100).step({duration: 400})

盡管上面兩個動畫都用時 800ms，但是它們表現是不一致的，見下圖：

兩個 step

一個 step

export 方法

export 方法返回一個具有 actions 屬性的對象，其中 actions 是一個對象數組。這個對象描述了一個 step 里所有的變換以及所用的時間等信息。還是拿上面的例子來說，下圖分別為一個 step 和兩個 step 的 actions 對象：可以看出，調用 step 的次數和 actions 數組的長度是相等的。

在調用 export 方法之后，通過將這個具有 action 屬性的對象 setData 到 animationData 上面，最終的內部實現可能是，小程序通過改變元素的 style 的 transition 值，最終實現一步一步的動畫。（在開發者工具可以看出對應元素的 style 發生了變化）

到這里，我們可以發現，其實所謂的 animation，是由一系列的 transition 依次觸發，組合而成，而一個 step 是一個 transition。也就不難理解，在沒有重置動畫的情況下，為什么再去 export 不會觸發動畫，因為此時元素在上一次動畫的作用下，元素的 style 已經被設置為最終狀態，也就不會有過渡動畫產生。如果想再次觸發動畫，必須使用 step({duration:0}) 對動畫進行重置。

如何實現 infinate 動畫

在小程序的 api 下，如何實現 infinate 動畫呢，這就要用到 transitionend 事件了。⚠️ 這個事件會在一個step結束后觸發一次，也就是說，如果你export了5個step，那么在整個動畫進行過程中會觸發5次

官方文檔告訴我們，這個事件會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發，所以我們可以在一個 step 結束之后重置動畫，然后再次 export，實現 infinate 動畫，直接看代碼 (mpvue)：

// wxml

    <cover-image src="../img/line.png" :animation="animationData" @transitionend="reAnimation" ></cover-image>


// js

    onReady () {
      this.animation = wx.createAnimation({
        duration: 8000,
        timingFunction: 'linear',
        delay: 0,
        transformOrigin: '50% 50% 0'
      })
      this.animation.rotate(360).step()
      this.animationData = this.animation.export()

    },

      reAnimation () {
        this.animation.rotate(0).step({duration: 0}) // 重置動畫
        this.animationData = this.animation.export()
        setTimeout(() => {
          this.animation.rotate(360).step()
          this.animationData = this.animation.export()
        }, 60)// 播放下一次動畫
      },

(本文完，不對之處還望指出)