Skip to main content
Version: 3.x

Animation

方法#

export#

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

参考文档

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

API 支持度#

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

backgroundColor#

设置背景色

参考文档

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

API 支持度#

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

bottom#

设置 bottom 值

参考文档

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

API 支持度#

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

height#

设置高度

参考文档

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

API 支持度#

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

left#

设置 left 值

参考文档

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

API 支持度#

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

matrix#

同 transform-function matrix

参考文档

() => Animation

API 支持度#

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

matrix3d#

同 transform-function matrix3d

参考文档

() => Animation

API 支持度#

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

opacity#

设置透明度

参考文档

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

API 支持度#

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

right#

设置 right 值

参考文档

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

API 支持度#

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

rotate#

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

参考文档

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

API 支持度#

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

rotate3d#

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

参考文档

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

API 支持度#

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

rotateX#

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

参考文档

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

API 支持度#

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

rotateY#

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

参考文档

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

API 支持度#

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

rotateZ#

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

参考文档

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

API 支持度#

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

scale#

缩放

参考文档

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

API 支持度#

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

scale3d#

缩放

参考文档

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

API 支持度#

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

scaleX#

缩放 X 轴

参考文档

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

API 支持度#

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

scaleY#

缩放 Y 轴

参考文档

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

API 支持度#

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

scaleZ#

缩放 Z 轴

参考文档

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

API 支持度#

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

skew#

对 X、Y 轴坐标进行倾斜

参考文档

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

API 支持度#

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

skewX#

对 X 轴坐标进行倾斜

参考文档

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

API 支持度#

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

skewY#

对 Y 轴坐标进行倾斜

参考文档

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

API 支持度#

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

step#

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

参考文档

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

API 支持度#

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

top#

设置 top 值

参考文档

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

API 支持度#

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

translate#

平移变换

参考文档

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

API 支持度#

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

translate3d#

对 xyz 坐标进行平移变换

参考文档

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

API 支持度#

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

translateX#

对 X 轴平移

参考文档

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

API 支持度#

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

translateY#

对 Y 轴平移

参考文档

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

API 支持度#

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

translateZ#

对 Z 轴平移

参考文档

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

API 支持度#

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

width#

设置宽度

参考文档

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

API 支持度#

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

参数#

StepOption#

参数类型必填说明
delaynumber否动画延迟时间，单位 ms
durationnumber否动画持续时间，单位 ms
timingFunction"linear" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-start" | "step-end"否动画的效果
transformOriginstring否

timingFunction#

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

API 支持度#

API微信小程序H5React 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✔️
Edit this page