tt.createAnimation
收藏我的收藏
收藏
基础库 1.0.0 开始支持本方法 该方法为同步方法。
创建一个动画实例 Animation。
可以通过 链式调用 实例方法来描述动画，最后通过 step 和 export 方法导出动画数据，传递给组件的 animation 属性。
语法
tt.createAnimation(options)
参数说明
options
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|
object | 是 | 配置项 | 1.0.0 |
options 结构
属性 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
duration | number | 400 | 否 | 指定一个动画周期的时长，单位 ms | 1.0.0 |
timingFunction | string | "linear" | 否 | 定义动画在每一动画周期中执行的节奏，参考文档 | 1.0.0 |
delay | number | 0 | 否 | 定义动画于何时开始 | 1.0.0 |
transformOrigin | string | "50% 50% 0" | 否 | 指定元素变形的原点 | 1.0.0 |
返回值
返回一个 Animation 对象，该对象具有如下方法：
样式
可以通过同名方法控制下表中描述的 CSS 属性，参数值与 CSS 定义相同，可以参考对应文档。
方法名 | 参数类型 | 描述 |
|---|---|---|
opacity | number | 透明度 |
backgroundColor | string | 背景色 |
width | number | 宽度 |
height | number | 高度 |
top | number | 顶部距离 |
bottom | number | 底部距离 |
left | number | 左侧距离 |
right | number | 右侧距离 |
变换
变换方法和参数与 CSS 标准定义值相同，可以参考对应文档。
旋转
方法名 | 参数类型 | 描述 |
|---|---|---|
rotate | number | 旋转, 等效 rotateZ |
rotateX | number | X 轴旋转 |
rotateY | number | Y 轴旋转 |
rotateZ | number | Z 轴旋转 |
rotate3d | number, number, number, number | 从 固定轴 顺时针旋转一个角度 |
缩放
方法名 | 参数类型 | 描述 |
|---|---|---|
scale | number | XY 缩放 |
scaleX | number | X 轴缩放 |
scaleY | number | Y 轴缩放 |
scaleZ | number | Z 轴缩放 |
scale3d | number, number, number | XYZ 轴缩放 |
偏移
方法名 | 参数类型 | 描述 |
|---|---|---|
translate | number, number | XY 轴平移 |
translateX | number | X 轴平移 |
translateY | number | Y 轴平移 |
translateZ | number | Z 轴平移 |
translate3d | number,number,number | XYZ 轴平 移 |
倾斜
方法名 | 参数类型 | 描述 |
|---|---|---|
skew | number, number | XY 轴倾斜 |
skewX | number | X 轴倾斜 |
skewY | number | Y 轴倾斜 |
矩阵变形
方法名 | 参数类型 | 描述 |
|---|---|---|
matrix | number, number, number, number, number, number | |
matrix3d | number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number |
step
调用 step 方法来标示一个 动画组。一组动画内的所有视觉变换会同时发生，同时结束。 可以给动画组添加和 创建动画时相同类型的属性 来实现自定义动画组。如不指定则沿用创建动画时指定的属性值。
export
调用 export 方法会把 动画组 导出为可以传递给 animation 属性应用的数据结构。
扫码体验
代码示例
Bug & Tip
- Tip：实现的是一个 CSS 动画，具体效果依赖浏览器的实现。
- Tip：每次
export只会导出“尚未被导出”的动画组，若某动画组已经被导出过，则会被清除。如果在调用export时存在尚未完成的“动画组”，则未进入“动画组”的视觉变换不会生效（但也不会被删除，下次调用step方法后会继续生效）。
