Animation
动画对象
支持情况:
方法
export
导出动画队列。export 方法每次调用后会清掉之前的动画操作。
支持情况:
() => { actions: TaroGeneral.IAnyObject[]; }
step
表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
支持情况:
(option?: StepOption) => Animation
参数 | 类型 |
---|---|
option | StepOption |
matrix
支持情况:
(a: number, b: number, c: number, d: number, tx: number, ty: number) => Animation
参数 | 类型 |
---|---|
a | number |
b | number |
c | number |
d | number |
tx | number |
ty | number |
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
参数 | 类型 |
---|---|
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 |
rotate
从原点顺时针旋转一个角度
支持情况:
(angle: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
angle | number | 旋转的角度。范围 [-180, 180] |
rotate3d
从 固定 轴顺时针旋转一个角度
支持情况:
(x: number, y?: number, z?: number, angle?: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
x | number | 旋转轴的 x 坐标 |
y | number | 旋转轴的 y 坐标 |
z | number | 旋转轴的 z 坐标 |
angle | number | 旋转的角度。范围 [-180, 180] |
rotateX
从 X 轴顺时针旋转一个角度
支持情况:
(angle: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
angle | number | 旋转的角度。范围 [-180, 180] |
rotateY
从 Y 轴顺时针旋转一个角度
支持情况:
(angle: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
angle | number | 旋转的角度。范围 [-180, 180] |
rotateZ
从 Z 轴顺时针旋转一个角度
支持情况:
(angle: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
angle | number | 旋转的角度。范围 [-180, 180] |
scale
缩放
支持情况:
(sx: number, sy?: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
sx | number | 当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数 |
sy | number | 在 Y 轴缩放 sy 倍数 |
scale3d
缩放
支持情况:
(sx: number, sy: number, sz: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
sx | number | x 轴的缩放倍数 |
sy | number | y 轴的缩放倍数 |
sz | number | z 轴的缩放倍数 |
scaleX
缩放 X 轴
支持情况:
(scale: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
scale | number | X 轴的缩放倍数 |
scaleY
缩放 Y 轴
支持情况:
(scale: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
scale | number | Y 轴的缩放倍数 |
scaleZ
缩放 Z 轴
支持情况:
(scale: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
scale | number | Z 轴的缩放倍数 |
skew
对 X、Y 轴坐标进行倾斜
支持情况:
(ax: number, ay: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
ax | number | 对 X 轴坐标倾斜的角度,范围 [-180, 180] |
ay | number | 对 Y 轴坐标倾斜的角度,范围 [-180, 180] |
skewX
对 X 轴坐标进行倾斜
支持情况:
(angle: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
angle | number | 倾斜的角度,范围 [-180, 180] |
skewY
对 Y 轴坐标进行倾斜
支持情况:
(angle: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
angle | number | 倾斜的角度,范围 [-180, 180] |
translate
平移变换
支持情况:
(tx?: number, ty?: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
tx | number | 当仅有该参数时表示在 X 轴偏移 tx,单位 px |
ty | number | 在 Y 轴平移的距离,单位为 px |
translate3d
对 xyz 坐标进行平移变换
支持情况:
(tx?: number, ty?: number, tz?: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
tx | number | 在 X 轴平移的距离,单位为 px |
ty | number | 在 Y 轴平移的距离,单位为 px |
tz | number | 在 Z 轴平移的距离,单位为 px |
translateX
对 X 轴平移
支持情况:
(translation: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
translation | number | 在 X 轴平移的距离,单位为 px |
translateY
对 Y 轴平移
支持情况:
(translation: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
translation | number | 在 Y 轴平移的距离,单位为 px |
translateZ
对 Z 轴平移
支持情况:
(translation: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
translation | number | 在 Z 轴平移的距离,单位为 px |
opacity
设置透明度
支持情况:
(value: number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | number | 透明度,范围 0-1 |
backgroundColor
设置背景色
支持情况:
(value: string) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string | 颜色值 |
width
设置宽度
支持情况:
(value: string | number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string or number | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
height
设置高度
支持情况:
(value: string | number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string or number | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
left
设置 left 值
支持情况:
(value: string | number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string or number | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
right
设置 right 值
支持情况:
(value: string | number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string or number | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
top
设置 top 值
支持情况:
(value: string | number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string or number | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
bottom
设置 bottom 值
支持情况:
(value: string | number) => Animation
参数 | 类型 | 说明 |
---|---|---|
value | string or number | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
参数
StepOption
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
delay | number | 否 | 动画延迟时间,单位 ms |
duration | number | 否 | 动画持续时间,单位 ms |
timingFunction | keyof TimingFunction | 否 | 动画的效果 |
transformOrigin | string | 否 |
TimingFunction
参数 | 说明 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-in-out | 动画以低速开始和结束 |
ease-out | 动画以低速结束 |
step-start | 动画第一帧就跳至结束状态直到结束 |
step-end | 动画一直保持开始状态,最后一帧跳到结束状态 |
API 支持度
API | 微信小程序 | 抖音小程序 | H5 | React Native | Harmony | Harmony hybrid |
---|---|---|---|---|---|---|
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 | ✔️ | ✔️ | ✔️ | ✔️ |