createAnimation 1.0.0+

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

提示

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

输入

名称数据类型属性默认值描述
durationnumberoptional400指定一个动画周期的时长，单位ms
timingFunctionstringoptionallinear定义动画在每一动画周期中执行的节奏，参考文档
delaynumberoptional0定义动画于何时开始
transformOriginstringoptional50% 50% 0指定元素变形的原点

输出

返回一个animation对象，该对象具有如下方法：

样式

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

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

变换

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

旋转

  • rotate
  • rotateX
  • rotateY
  • rotateZ
  • rotate3d

缩放

  • scale
  • scaleX
  • scaleY
  • scaleZ
  • scale3d

偏移

  • translate
  • translateX
  • translateY
  • translateZ
  • translate3d

倾斜

  • skew
  • skewX
  • skewY

矩阵变形

  • matrix
  • matrix3d

step

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

export

调用export方法会把「动画组」导出为可以传递给animation属性应用的数据结构。

⚠️注意

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

代码示例

  1. <view animation="{{animationData}}"></view>
  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个动画组
  19.         this.setData({
  20.             animationData: this.animation.export()
  21.         });
  23.         // 创建第2个动画组，修改动画执行时间为5秒
  24.         // 可以分步骤创建动画组
  25.         this.animation
  26.             .backgroundColor('green');
  27.         this.animation
  28.             .skewX(30)
  29.             .step({
  30.                 duration: 5000
  31.             });
  33.         // 没有被动画组包裹的视觉修改不会被导出
  34.         this.animation
  35.             .rotateY(60)
  36.             .opacity(0.3)
  37.             .width(200);
  39.         // 只会应用已经创建好的第2个动画组
  40.         // 注意：这时第1个动画可能还没有执行完毕，导出应用可能出现不如预期的效果
  41.         //      建议确保分别导出的前序动画执行完毕再应用下一个导出
  42.         //      在同一个导出里的动画组会确保顺序执行
  43.         this.setData({
  44.             animationData: this.animation.export()
  45.         });
  47.         // 此时才创建了第3个动画组
  48.         // 如果整个方法再次被调用时，第一次导出会将其应用
  49.         this.animation.step({
  50.             timingFunction: 'step-start'
  51.         });
  52.     }
  53. });

已知问题

原文: https://developer.toutiao.com/docs/api/createAnimation.html