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" | 否 | 指定元素变形的原点 transformOrigin 属性用法同浏览器 css transform-origin 这个用法 | 1.0.0 |
返回值
返回一个 Animation 对象，该对象具有如下方法：
样式
可以通过同名方法控制下表中描述的 CSS 属性，参数值与 CSS 定义相同，可以参考对应文档。
方法名 | 参数类型 | 描述 |
opacity | number | 透明度 |
backgroundColor | string | 背景色 |
width | number | 宽度 |
height | number | 高度 |
top | number | 顶部距离 |
bottom | number | 底部距离 |
left | number | 左侧距离 |
right | number | 右侧距离 |
变换
旋转
方法名 | 参数类型 | 描述 |
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 轴倾斜 |
矩阵变形
step
export
调用
export方法会把动画组导出为可以传递给animation属性应用的数据结构。扫码体验
代码示例
Bug & Tip
- •Tip：实现的是一个 CSS 动画，具体效果依赖浏览器的实现。
- •Tip：每次
export只会导出“尚未被导出”的动画组，若某动画组已经被导出过，则会被清除。如果在调用 export 时存在尚未完成的“动画组”，则未进入“动画组”的视觉变换不会生效（但也不会被删除，下次调用 step 方法后会继续生效）。
