版本：2.x

Animation

方法

export

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

() => Record<string, any>[]

API 支持度

API	微信小程序	H5	React Native
Animation.export	✔️

backgroundColor

设置背景色

(value: string) => Animation

参数	类型	说明
value	`string`	颜色值

API 支持度

API	微信小程序	H5	React Native
Animation.backgroundColor	✔️

bottom

设置 bottom 值

(value: string | number) => Animation

参数	类型	说明
value	`string \| number`	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

API 支持度

API	微信小程序	H5	React Native
Animation.bottom	✔️

height

设置高度

(value: string | number) => Animation

参数	类型	说明
value	`string \| number`	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

API 支持度

API	微信小程序	H5	React Native
Animation.height	✔️

left

设置 left 值

(value: string | number) => Animation

参数	类型	说明
value	`string \| number`	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

API 支持度

API	微信小程序	H5	React Native
Animation.left	✔️

matrix

同 transform-function matrix

() => Animation

API 支持度

API	微信小程序	H5	React Native
Animation.matrix	✔️

matrix3d

同 transform-function matrix3d

() => Animation

API 支持度

API	微信小程序	H5	React Native
Animation.matrix3d	✔️

opacity

设置透明度

(value: number) => Animation

参数	类型	说明
value	`number`	透明度，范围 0-1

API 支持度

API	微信小程序	H5	React Native
Animation.opacity	✔️

right

设置 right 值

(value: string | number) => Animation

参数	类型	说明
value	`string \| number`	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

API 支持度

API	微信小程序	H5	React Native
Animation.right	✔️

rotate

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

(angle: number) => Animation

参数	类型	说明
angle	`number`	旋转的角度。范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.rotate	✔️

rotate3d

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

(x: number, y: number, z: number, angle: number) => Animation

参数	类型	说明
x	`number`	旋转轴的 x 坐标
y	`number`	旋转轴的 y 坐标
z	`number`	旋转轴的 z 坐标
angle	`number`	旋转的角度。范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.rotate3d	✔️

rotateX

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

(angle: number) => Animation

参数	类型	说明
angle	`number`	旋转的角度。范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.rotateX	✔️

rotateY

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

(angle: number) => Animation

参数	类型	说明
angle	`number`	旋转的角度。范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.rotateY	✔️

rotateZ

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

(angle: number) => Animation

参数	类型	说明
angle	`number`	旋转的角度。范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.rotateZ	✔️

scale

缩放

(sx: number, sy?: number) => Animation

参数	类型	说明
sx	`number`	当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数
sy	`number`	在 Y 轴缩放 sy 倍数

API 支持度

API	微信小程序	H5	React Native
Animation.scale	✔️

scale3d

缩放

(sx: number, sy: number, sz: number) => Animation

参数	类型	说明
sx	`number`	x 轴的缩放倍数
sy	`number`	y 轴的缩放倍数
sz	`number`	z 轴的缩放倍数

API 支持度

API	微信小程序	H5	React Native
Animation.scale3d	✔️

scaleX

缩放 X 轴

(scale: number) => Animation

参数	类型	说明
scale	`number`	X 轴的缩放倍数

API 支持度

API	微信小程序	H5	React Native
Animation.scaleX	✔️

scaleY

缩放 Y 轴

(scale: number) => Animation

参数	类型	说明
scale	`number`	Y 轴的缩放倍数

API 支持度

API	微信小程序	H5	React Native
Animation.scaleY	✔️

scaleZ

缩放 Z 轴

(scale: number) => Animation

参数	类型	说明
scale	`number`	Z 轴的缩放倍数

API 支持度

API	微信小程序	H5	React Native
Animation.scaleZ	✔️

skew

对 X、Y 轴坐标进行倾斜

(ax: number, ay: number) => Animation

参数	类型	说明
ax	`number`	对 X 轴坐标倾斜的角度，范围 [-180, 180]
ay	`number`	对 Y 轴坐标倾斜的角度，范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.skew	✔️

skewX

对 X 轴坐标进行倾斜

(angle: number) => Animation

参数	类型	说明
angle	`number`	倾斜的角度，范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.skewX	✔️

skewY

对 Y 轴坐标进行倾斜

(angle: number) => Animation

参数	类型	说明
angle	`number`	倾斜的角度，范围 [-180, 180]

API 支持度

API	微信小程序	H5	React Native
Animation.skewY	✔️

step

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

(option?: StepOption) => Animation

参数	类型
option	`StepOption`

API 支持度

API	微信小程序	H5	React Native
Animation.step	✔️

top

设置 top 值

(value: string | number) => Animation

参数	类型	说明
value	`string \| number`	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

API 支持度

API	微信小程序	H5	React Native
Animation.top	✔️

translate

平移变换

(tx?: number, ty?: number) => Animation

参数	类型	说明
tx	`number`	当仅有该参数时表示在 X 轴偏移 tx，单位 px
ty	`number`	在 Y 轴平移的距离，单位为 px

API 支持度

API	微信小程序	H5	React Native
Animation.translate	✔️

translate3d

对 xyz 坐标进行平移变换

(tx?: number, ty?: number, tz?: number) => Animation

参数	类型	说明
tx	`number`	在 X 轴平移的距离，单位为 px
ty	`number`	在 Y 轴平移的距离，单位为 px
tz	`number`	在 Z 轴平移的距离，单位为 px

API 支持度

API	微信小程序	H5	React Native
Animation.translate3d	✔️

translateX

对 X 轴平移

(translation: number) => Animation

参数	类型	说明
translation	`number`	在 X 轴平移的距离，单位为 px

API 支持度

API	微信小程序	H5	React Native
Animation.translateX	✔️

translateY

对 Y 轴平移

(translation: number) => Animation

参数	类型	说明
translation	`number`	在 Y 轴平移的距离，单位为 px

API 支持度

API	微信小程序	H5	React Native
Animation.translateY	✔️

translateZ

对 Z 轴平移

(translation: number) => Animation

参数	类型	说明
translation	`number`	在 Z 轴平移的距离，单位为 px

API 支持度

API	微信小程序	H5	React Native
Animation.translateZ	✔️

width

设置宽度

(value: string | number) => Animation

参数	类型	说明
value	`string \| number`	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

API 支持度

API	微信小程序	H5	React Native
Animation.width	✔️

参数

StepOption

参数	类型	必填	说明
delay	`number`	否	动画延迟时间，单位 ms
duration	`number`	否	动画持续时间，单位 ms
timingFunction	`"linear" \| "ease" \| "ease-in" \| "ease-in-out" \| "ease-out" \| "step-start" \| "step-end"`	否	动画的效果
transformOrigin	`string`	否

timingFunction

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

API 支持度

API	微信小程序	H5	React Native
Animation.export	✔️
Animation.backgroundColor	✔️
Animation.bottom	✔️
Animation.height	✔️
Animation.left	✔️
Animation.matrix	✔️
Animation.matrix3d	✔️
Animation.opacity	✔️
Animation.right	✔️
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.step	✔️
Animation.top	✔️
Animation.translate	✔️
Animation.translate3d	✔️
Animation.translateX	✔️
Animation.translateY	✔️
Animation.translateZ	✔️
Animation.width	✔️

方法​

export​

API 支持度​

backgroundColor​

API 支持度​

bottom​

API 支持度​

height​

API 支持度​

left​

API 支持度​

matrix​

API 支持度​

matrix3d​

API 支持度​

opacity​

API 支持度​

right​

API 支持度​

rotate​

API 支持度​

rotate3d​

API 支持度​

rotateX​

API 支持度​

rotateY​

API 支持度​

rotateZ​

API 支持度​

scale​

API 支持度​

scale3d​

API 支持度​

scaleX​

API 支持度​

scaleY​

API 支持度​

scaleZ​

API 支持度​

skew​

API 支持度​

skewX​

API 支持度​

skewY​

API 支持度​

step​

API 支持度​

top​

API 支持度​

translate​

API 支持度​

translate3d​

API 支持度​

translateX​

API 支持度​

translateY​

API 支持度​

translateZ​

API 支持度​

width​

API 支持度​

参数​

StepOption​

timingFunction​

API 支持度​

方法

export

API 支持度

backgroundColor

API 支持度

bottom

API 支持度

height

API 支持度

left

API 支持度

matrix

API 支持度

matrix3d

API 支持度

opacity

API 支持度

right

API 支持度

rotate

API 支持度

rotate3d

API 支持度

rotateX

API 支持度

rotateY

API 支持度

rotateZ

API 支持度

scale

API 支持度

scale3d

API 支持度

scaleX

API 支持度

scaleY

API 支持度

scaleZ

API 支持度

skew

API 支持度

skewX

API 支持度

skewY

API 支持度

step

API 支持度

top

API 支持度

translate

API 支持度

translate3d

API 支持度

translateX

API 支持度

translateY

API 支持度

translateZ

API 支持度

width

API 支持度

参数

StepOption

timingFunction

API 支持度