tt.createAnimation

創(chuàng)建一個動畫實例animation?？梢酝ㄟ^鏈式調(diào)用實例方法來描述動畫，最后通過step和export方法導出動畫數(shù)據(jù)，傳遞給組件的animation屬性。

提示實現(xiàn)的是一個 CSS 動畫，具體效果依賴瀏覽器的實現(xiàn)。

輸入

輸出

返回一個animation對象，該對象具有如下方法：

樣式

可以通過同名方法控制下表中描述的 CSS 屬性，參數(shù)值與 CSS 定義相同，可以參考對應文檔。

• opacity
• backgroundColor
• width
• height
• top
• right
• bottom
• left

變換

變換方法和參數(shù)與 CSS 標準定義值相同，可以參考對應文檔。

旋轉(zhuǎn)

• rotate
• rotateX
• rotateY
• rotateZ
• rotate3d

縮放

• scale
• scaleX
• scaleY
• scaleZ
• scale3d

偏移

• translate
• translateX
• translateY
• translateZ
• translate3d

傾斜

• skew
• skewX
• skewY

矩陣變形

• matrix
• matrix3d

step

調(diào)用step方法來標示一個「動畫組」。一組動畫內(nèi)的所有視覺變換會同時發(fā)生，同時結(jié)束。 可以給動畫組添加和創(chuàng)建動畫時相同類型的屬性來實現(xiàn)自定義動畫組。如不指定則沿用創(chuàng)建動畫時指定的屬性值。

export

調(diào)用export方法會把「動畫組」導出為可以傳遞給 animation 屬性應用的數(shù)據(jù)結(jié)構(gòu)。

?? 注意每次export只會導出「尚未被導出」的動畫組，若某動畫組已經(jīng)被導出過，則會被清除。 如果在調(diào)用export時存在尚未完成的「動畫組」，則未進入「動畫組」的視覺變換不會生效（但也不會被刪除，下次調(diào)用step方法后會繼續(xù)生效）。

代碼示例

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

Page({
  animate() {
    if (!this.animation) {
      console.log("createNewAnimation");
      // 創(chuàng)建一個默認動畫組執(zhí)行時間為1秒的動畫
      var animation = tt.createAnimation({
        duration: 1000,
        timingFunction: "cubic-bezier(0.1, 0.7, 1.0, 0.1)"
      });
      this.animation = animation;
    }

    // 創(chuàng)建一個動畫組，使用默認設置
    this.animation.backgroundColor("blue").step();

    // 應用第1個動畫組
    this.setData({
      animationData: this.animation.export()
    });

    // 創(chuàng)建第2個動畫組，修改動畫執(zhí)行時間為5秒
    // 可以分步驟創(chuàng)建動畫組
    this.animation.backgroundColor("green");
    this.animation.skewX(30).step({
      duration: 5000
    });

    // 沒有被動畫組包裹的視覺修改不會被導出
    this.animation
      .rotateY(60)
      .opacity(0.3)
      .width(200);

    // 只會應用已經(jīng)創(chuàng)建好的第2個動畫組
    // 注意：這時第1個動畫可能還沒有執(zhí)行完畢，導出應用可能出現(xiàn)不如預期的效果
    //      建議確保分別導出的前序動畫執(zhí)行完畢再應用下一個導出
    //      在同一個導出里的動畫組會確保順序執(zhí)行
    this.setData({
      animationData: this.animation.export()
    });

    // 此時才創(chuàng)建了第3個動畫組
    // 如果整個方法再次被調(diào)用時，第一次導出會將其應用
    this.animation.step({
      timingFunction: "step-start"
    });
  }
});