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 属性应用的数据结构。

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

Bug & Tip

Tip：实现的是一个 CSS 动画，具体效果依赖浏览器的实现。
Tip：每次export只会导出“尚未被导出”的动画组，若某动画组已经被导出过，则会被清除。如果在调用 export 时存在尚未完成的“动画组”，则未进入“动画组”的视觉变换不会生效（但也不会被删除，下次调用 step 方法后会继续生效）。

下一篇：小程序文档指引

文档评论

登录后可参与评论

tt.createAnimation收藏我的收藏

语法