创建一个动画实例。可以通过链式调用实例方法来描述动画，最后通过step和export方法导出动画数据，传递给组件的animation属性。

提示

实现的是一个CSS动画，具体效果依赖浏览器的实现。

输入

输出

可以通过同名方法控制下表中描述的CSS属性，参数值与CSS定义相同，可以参考对应文档。

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

变换方法和参数与CSS标准定义值相同，可以参考对应文档。

  • rotate
  • rotateX
  • rotateY
  • rotateZ
  • rotate3d
  • scale
  • scaleX
  • scaleY
  • scaleZ
  • translateX
  • translateY
  • translateZ
  • translate3d
  • skew
  • skewX
  • skewY
  • matrix
  • matrix3d

调用step方法来标示一个「动画组」。一组动画内的所有视觉变换会同时发生，同时结束。可以给动画组添加和来实现自定义动画组。如不指定则沿用创建动画时指定的属性值。

⚠️注意

每次export只会导出「尚未被导出」的动画组，若某动画组已经被导出过，则会被清除。如果在调用export时存在尚未完成的「动画组」，则未进入「动画组」的视觉变换不会生效（但也不会被删除，下次调用step方法后会继续生效）。

代码示例

  1. Page({
  2.     animate () {  
  3.         if (!this.animation) {
  4.             console.log('createNewAnimation');
  5.             // 创建一个默认动画组执行时间为1秒的动画
  6.             var animation = tt.createAnimation({
  7.                 duration: 1000,
  8.                 timingFunction: 'cubic-bezier(0.1, 0.7, 1.0, 0.1)'
  9.             });
  10.             this.animation = animation
  11.         }
  13.         // 创建一个动画组，使用默认设置
  14.         this.animation
  15.             .backgroundColor('blue')
  16.             .step();
  18.         // 应用第1个动画组
  20.             animationData: this.animation.export()
  21.         });
  22.         // 创建第2个动画组，修改动画执行时间为5秒
  23.         // 可以分步骤创建动画组
  24.         this.animation
  25.             .backgroundColor('green');
  26.         this.animation
  27.             .skewX(30)
  28.             .step({
  29.                 duration: 5000
  30.             });
  32.         // 没有被动画组包裹的视觉修改不会被导出
  33.         this.animation
  34.             .rotateY(60)
  35.             .opacity(0.3)
  36.             .width(200);
  38.         // 只会应用已经创建好的第2个动画组
  39.         // 注意：这时第1个动画可能还没有执行完毕，导出应用可能出现不如预期的效果
  40.         //      建议确保分别导出的前序动画执行完毕再应用下一个导出
  41.         //      在同一个导出里的动画组会确保顺序执行
  42.         this.setData({
  43.             animationData: this.animation.export()
  44.         });
  46.         // 此时才创建了第3个动画组
  47.         // 如果整个方法再次被调用时，第一次导出会将其应用
  48.         this.animation.step({
  49.             timingFunction: 'step-start'
  50.         });
  51.     }

已知问题