Animation

方法

export

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

参考文档

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

API 支持度

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

backgroundColor

设置背景色

参考文档

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

API 支持度

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

bottom

设置 bottom 值

参考文档

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

API 支持度

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

height

设置高度

参考文档

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

API 支持度

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

left

设置 left 值

参考文档

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

API 支持度

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

matrix

transform-function matrix

参考文档

  1. () => Animation

API 支持度

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

matrix3d

transform-function matrix3d

参考文档

  1. () => Animation

API 支持度

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

opacity

设置透明度

参考文档

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

API 支持度

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

right

设置 right 值

参考文档

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

API 支持度

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

rotate

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

参考文档

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

API 支持度

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

rotate3d

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

参考文档

  1. (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 轴顺时针旋转一个角度

参考文档

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

API 支持度

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

rotateY

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

参考文档

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

API 支持度

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

rotateZ

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

参考文档

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

API 支持度

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

scale

缩放

参考文档

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

API 支持度

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

scale3d

缩放

参考文档

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

API 支持度

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

scaleX

缩放 X 轴

参考文档

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

API 支持度

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

scaleY

缩放 Y 轴

参考文档

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

API 支持度

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

scaleZ

缩放 Z 轴

参考文档

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

API 支持度

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

skew

对 X、Y 轴坐标进行倾斜

参考文档

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

API 支持度

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

skewX

对 X 轴坐标进行倾斜

参考文档

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

API 支持度

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

skewY

对 Y 轴坐标进行倾斜

参考文档

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

API 支持度

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

step

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

参考文档

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

API 支持度

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

top

设置 top 值

参考文档

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

API 支持度

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

translate

平移变换

参考文档

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

API 支持度

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

translate3d

对 xyz 坐标进行平移变换

参考文档

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

API 支持度

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

translateX

对 X 轴平移

参考文档

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

API 支持度

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

translateY

对 Y 轴平移

参考文档

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

API 支持度

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

translateZ

对 Z 轴平移

参考文档

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

API 支持度

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

width

设置宽度

参考文档

  1. (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✔️