开发
API

tt.createAnimation

基础库 1.0.0 开始支持本方法 该方法为同步方法。

创建一个动画实例 Animation

可以通过 链式调用 实例方法来描述动画,最后通过 stepexport 方法导出动画数据,传递给组件的 animation 属性。

语法

tt.createAnimation(options)

参数说明

options

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
durationnumber400指定一个动画周期的时长,单位 ms1.0.0
timingFunctionstring"linear"定义动画在每一动画周期中执行的节奏,参考文档1.0.0
delaynumber0定义动画于何时开始1.0.0
transformOriginstring"50% 50% 0"指定元素变形的原点1.0.0

返回值

返回一个 Animation 对象,该对象具有如下方法:

样式

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

方法名参数类型描述
opacitynumber透明度
backgroundColorstring背景色
widthnumber宽度
heightnumber高度
topnumber顶部距离
bottomnumber底部距离
leftnumber左侧距离
rightnumber右侧距离

变换

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

旋转

方法名参数类型描述
rotatenumber旋转, 等效 rotateZ
rotateXnumberX 轴旋转
rotateYnumberY 轴旋转
rotateZnumberZ 轴旋转
rotate3dnumber, number, number, number固定轴 顺时针旋转一个角度

缩放

方法名参数类型描述
scalenumberXY 缩放
scaleXnumberX 轴缩放
scaleYnumberY 轴缩放
scaleZnumberZ 轴缩放
scale3dnumber, number, numberXYZ 轴缩放

偏移

方法名参数类型描述
translatenumber, numberXY 轴平移
translateXnumberX 轴平移
translateYnumberY 轴平移
translateZnumberZ 轴平移
translate3dnumber,number,numberXYZ 轴平移

倾斜

方法名参数类型描述
skewnumber, numberXY 轴倾斜
skewXnumberX 轴倾斜
skewYnumberY 轴倾斜

矩阵变形

方法名参数类型描述
matrixnumber, number, number, number, number, number参考
matrix3dnumber, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number参考

step

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

export

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

效果示例

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<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",
    });
  },
});

Bug & Tip

  • Tip:实现的是一个 CSS 动画,具体效果依赖浏览器的实现。
  • Tip:每次export只会导出“尚未被导出”的动画组,若某动画组已经被导出过,则会被清除。如果在调用 export 时存在尚未完成的“动画组”,则未进入“动画组”的视觉变换不会生效(但也不会被删除,下次调用 step 方法后会继续生效)。
点击纠错
评价此篇文档