Skip to main content
Version: 3.x

Animation

动画对象

支持情况:

参考文档

方法

export

导出动画队列。export 方法每次调用后会清掉之前的动画操作

支持情况:

参考文档

() => { actions: TaroGeneral.IAnyObject[]; }

step

表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。

支持情况:

参考文档

(option?: StepOption) => Animation
参数类型
optionStepOption

matrix

transform-function matrix

支持情况:

参考文档

(a: number, b: number, c: number, d: number, tx: number, ty: number) => Animation
参数类型
anumber
bnumber
cnumber
dnumber
txnumber
tynumber

matrix3d

transform-function matrix3d

支持情况:

参考文档

(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number) => Animation
参数类型
a1number
b1number
c1number
d1number
a2number
b2number
c2number
d2number
a3number
b3number
c3number
d3number
a4number
b4number
c4number
d4number

rotate

从原点顺时针旋转一个角度

支持情况:

参考文档

(angle: number) => Animation
参数类型说明
anglenumber旋转的角度。范围 [-180, 180]

rotate3d

从 固定 轴顺时针旋转一个角度

支持情况:

参考文档

(x: number, y?: number, z?: number, angle?: number) => Animation
参数类型说明
xnumber旋转轴的 x 坐标
ynumber旋转轴的 y 坐标
znumber旋转轴的 z 坐标
anglenumber旋转的角度。范围 [-180, 180]

rotateX

从 X 轴顺时针旋转一个角度

支持情况:

参考文档

(angle: number) => Animation
参数类型说明
anglenumber旋转的角度。范围 [-180, 180]

rotateY

从 Y 轴顺时针旋转一个角度

支持情况:

参考文档

(angle: number) => Animation
参数类型说明
anglenumber旋转的角度。范围 [-180, 180]

rotateZ

从 Z 轴顺时针旋转一个角度

支持情况:

参考文档

(angle: number) => Animation
参数类型说明
anglenumber旋转的角度。范围 [-180, 180]

scale

缩放

支持情况:

参考文档

(sx: number, sy?: number) => Animation
参数类型说明
sxnumber当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数
synumber在 Y 轴缩放 sy 倍数

scale3d

缩放

支持情况:

参考文档

(sx: number, sy: number, sz: number) => Animation
参数类型说明
sxnumberx 轴的缩放倍数
synumbery 轴的缩放倍数
sznumberz 轴的缩放倍数

scaleX

缩放 X 轴

支持情况:

参考文档

(scale: number) => Animation
参数类型说明
scalenumberX 轴的缩放倍数

scaleY

缩放 Y 轴

支持情况:

参考文档

(scale: number) => Animation
参数类型说明
scalenumberY 轴的缩放倍数

scaleZ

缩放 Z 轴

支持情况:

参考文档

(scale: number) => Animation
参数类型说明
scalenumberZ 轴的缩放倍数

skew

对 X、Y 轴坐标进行倾斜

支持情况:

参考文档

(ax: number, ay: number) => Animation
参数类型说明
axnumber对 X 轴坐标倾斜的角度,范围 [-180, 180]
aynumber对 Y 轴坐标倾斜的角度,范围 [-180, 180]

skewX

对 X 轴坐标进行倾斜

支持情况:

参考文档

(angle: number) => Animation
参数类型说明
anglenumber倾斜的角度,范围 [-180, 180]

skewY

对 Y 轴坐标进行倾斜

支持情况:

参考文档

(angle: number) => Animation
参数类型说明
anglenumber倾斜的角度,范围 [-180, 180]

translate

平移变换

支持情况:

参考文档

(tx?: number, ty?: number) => Animation
参数类型说明
txnumber当仅有该参数时表示在 X 轴偏移 tx,单位 px
tynumber在 Y 轴平移的距离,单位为 px

translate3d

对 xyz 坐标进行平移变换

支持情况:

参考文档

(tx?: number, ty?: number, tz?: number) => Animation
参数类型说明
txnumber在 X 轴平移的距离,单位为 px
tynumber在 Y 轴平移的距离,单位为 px
tznumber在 Z 轴平移的距离,单位为 px

translateX

对 X 轴平移

支持情况:

参考文档

(translation: number) => Animation
参数类型说明
translationnumber在 X 轴平移的距离,单位为 px

translateY

对 Y 轴平移

支持情况:

参考文档

(translation: number) => Animation
参数类型说明
translationnumber在 Y 轴平移的距离,单位为 px

translateZ

对 Z 轴平移

支持情况:

参考文档

(translation: number) => Animation
参数类型说明
translationnumber在 Z 轴平移的距离,单位为 px

opacity

设置透明度

支持情况:

参考文档

(value: number) => Animation
参数类型说明
valuenumber透明度,范围 0-1

backgroundColor

设置背景色

支持情况:

参考文档

(value: string) => Animation
参数类型说明
valuestring颜色值

width

设置宽度

支持情况:

参考文档

(value: string | number) => Animation
参数类型说明
valuestring or number长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值

height

设置高度

支持情况:

参考文档

(value: string | number) => Animation
参数类型说明
valuestring or number长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值

left

设置 left 值

支持情况:

参考文档

(value: string | number) => Animation
参数类型说明
valuestring or number长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值

设置 right 值

支持情况:

参考文档

(value: string | number) => Animation
参数类型说明
valuestring or number长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值

top

设置 top 值

支持情况:

参考文档

(value: string | number) => Animation
参数类型说明
valuestring or number长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值

bottom

设置 bottom 值

支持情况:

参考文档

(value: string | number) => Animation
参数类型说明
valuestring or number长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值

参数

StepOption

参数类型必填说明
delaynumber动画延迟时间,单位 ms
durationnumber动画持续时间,单位 ms
timingFunctionkeyof TimingFunction动画的效果
transformOriginstring

TimingFunction

参数说明
linear动画从头到尾的速度是相同的
ease动画以低速开始,然后加快,在结束前变慢
ease-in动画以低速开始
ease-in-out动画以低速开始和结束
ease-out动画以低速结束
step-start动画第一帧就跳至结束状态直到结束
step-end动画一直保持开始状态,最后一帧跳到结束状态

API 支持度

API微信小程序H5React Native
Animation✔️✔️
Animation.export✔️✔️
Animation.step✔️✔️
Animation.matrix✔️✔️
Animation.matrix3d✔️✔️
Animation.rotate✔️✔️
Animation.rotate3d✔️✔️
Animation.rotateX✔️✔️
Animation.rotateY✔️✔️
Animation.rotateZ✔️✔️
Animation.scale✔️✔️
Animation.scale3d✔️✔️
Animation.scaleX✔️✔️
Animation.scaleY✔️✔️
Animation.scaleZ✔️✔️
Animation.skew✔️✔️
Animation.skewX✔️✔️
Animation.skewY✔️✔️
Animation.translate✔️✔️
Animation.translate3d✔️✔️
Animation.translateX✔️✔️
Animation.translateY✔️✔️
Animation.translateZ✔️✔️
Animation.opacity✔️✔️
Animation.backgroundColor✔️✔️
Animation.width✔️✔️
Animation.height✔️✔️
Animation.left✔️✔️
Animation.right✔️✔️
Animation.top✔️✔️
Animation.bottom✔️✔️