tt.createAnimation

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

提示實(shí)現(xiàn)的是一個(gè) CSS 動(dòng)畫，具體效果依賴瀏覽器的實(shí)現(xiàn)。

輸入

輸出

返回一個(gè)animation對(duì)象，該對(duì)象具有如下方法：

樣式

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

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

變換

變換方法和參數(shù)與 CSS 標(biāo)準(zhǔn)定義值相同，可以參考對(duì)應(yīng)文檔。

旋轉(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方法來標(biāo)示一個(gè)「動(dòng)畫組」。一組動(dòng)畫內(nèi)的所有視覺變換會(huì)同時(shí)發(fā)生，同時(shí)結(jié)束。 可以給動(dòng)畫組添加和創(chuàng)建動(dòng)畫時(shí)相同類型的屬性來實(shí)現(xiàn)自定義動(dòng)畫組。如不指定則沿用創(chuàng)建動(dòng)畫時(shí)指定的屬性值。

export

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

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

代碼示例

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

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

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

    // 應(yīng)用第1個(gè)動(dòng)畫組
    this.setData({
      animationData: this.animation.export()
    });

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

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

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

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