tt.createAnimation

tt.createAnimation(options)

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

Page({
  animate() {
    if (!this.animation) {
      console.log("createNewAnimation");
      // 创建一个默认动画组执行时间为1秒的动画
      const animation = tt.createAnimation({
        duration: 1000,
        timingFunction: "cubic-bezier(0.1, 0.7, 1.0, 0.1)",
      });
      this.animation = animation;
    }

    // 创建一个动画组，使用默认设置
    this.animation.backgroundColor("blue").step();

    // 应用第1个动画组
    this.setData({
      animationData: this.animation.export(),
    });

    // 创建第2个动画组，修改动画执行时间为5秒
    // 可以分步骤创建动画组
    this.animation.backgroundColor("green");
    this.animation.skewX(30).step({
      duration: 5000,
    });

    // 没有被动画组包裹的视觉修改不会被导出
    this.animation.rotateY(60).opacity(0.3).width(200);

    // 只会应用已经创建好的第2个动画组
    // 注意：这时第1个动画可能还没有执行完毕，导出应用可能出现不如预期的效果
    //      建议确保分别导出的前序动画执行完毕再应用下一个导出
    //      在同一个导出里的动画组会确保顺序执行
    this.setData({
      animationData: this.animation.export(),
    });

    // 此时才创建了第3个动画组
    // 如果整个方法再次被调用时，第一次导出会将其应用
    this.animation.step({
      timingFunction: "step-start",
    });
  },
});