title: Animation
sidebar_label: Animation
Methods
export
Exports the animation queue. The “export” method clears the previous animation operations each time it is called.
Reference
() => Record<string, any>[]
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.export |
✔️ |
|
backgroundColor
Sets the background color.
Reference
(value: string) => Animation
Property |
Type |
Description |
value |
string |
Color value |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.backgroundColor |
✔️ |
|
bottom
Sets the bottom value.
Reference
(value: string | number) => Animation
Property |
Type |
Description |
value |
string | number |
Length value. If number is input, px is used by default. Other length values in custom units can be passed. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.bottom |
✔️ |
|
height
Sets the height.
Reference
(value: string | number) => Animation
Property |
Type |
Description |
value |
string | number |
Length value. If number is input, px is used by default. Other length values in custom units can be passed. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.height |
✔️ |
|
left
Set the left value
Reference
(value: string | number) => Animation
Property |
Type |
Description |
value |
string | number |
Length value. If number is input, px is used by default. Other length values in custom units can be passed. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.left |
✔️ |
|
matrix
Similar to transform-function matrix.
Reference
() => Animation
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.matrix |
✔️ |
|
matrix3d
Similar to transform-function matrix3d.
Reference
() => Animation
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.matrix3d |
✔️ |
|
opacity
Sets the transparency.
Reference
(value: number) => Animation
Property |
Type |
Description |
value |
number |
Transparency. It ranges from 0 to 1. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.opacity |
✔️ |
|
right
Sets the right value.
Reference
(value: string | number) => Animation
Property |
Type |
Description |
value |
string | number |
Length value. If number is input, px is used by default. Other length values in custom units can be passed. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.right |
✔️ |
|
rotate
Rotates some degrees clockwise from the origin.
Reference
(angle: number) => Animation
Property |
Type |
Description |
angle |
number |
Rotation degree value. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.rotate |
✔️ |
|
rotate3d
Rotates the x-axis some degrees clockwise.
Reference
(x: number, y: number, z: number, angle: number) => Animation
Property |
Type |
Description |
x |
number |
X coordinate of the rotational axis |
y |
number |
Y coordinate of the rotational axis |
z |
number |
Z coordinate of the rotational axis |
angle |
number |
Rotation degree value. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.rotate3d |
✔️ |
|
rotateX
Rotates the x-axis some degrees clockwise.
Reference
(angle: number) => Animation
Property |
Type |
Description |
angle |
number |
Rotation degree value. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.rotateX |
✔️ |
|
rotateY
Rotates the y-axis some degrees clockwise.
Reference
(angle: number) => Animation
Property |
Type |
Description |
angle |
number |
Rotation degree value. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.rotateY |
✔️ |
|
rotateZ
Rotates the z-axis some degrees clockwise.
Reference
(angle: number) => Animation
Property |
Type |
Description |
angle |
number |
Rotation degree value. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.rotateZ |
✔️ |
|
scale
Zooms in/out
Reference
(sx: number, sy?: number) => Animation
Property |
Type |
Description |
sx |
number |
Zoom in/out the x- and y-axises according to a scale of s if only the sx parameter exists. |
sy |
number |
Zoom in/out the y-axis according to a scale of sy. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.scale |
✔️ |
|
scale3d
Zooms in/out
Reference
(sx: number, sy: number, sz: number) => Animation
Property |
Type |
Description |
sx |
number |
The scale according to which the x-axis is zoomed in/out. |
sy |
number |
The scale according to which the y-axis is zoomed in/out. |
sz |
number |
The scale according to which the z-axis is zoomed in/out. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.scale3d |
✔️ |
|
scaleX
Zooms in/out the x-axis.
Reference
(scale: number) => Animation
Property |
Type |
Description |
scale |
number |
The scale according to which the x-axis is zoomed in/out. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.scaleX |
✔️ |
|
scaleY
Zooms in/out the y-axis.
Reference
(scale: number) => Animation
Property |
Type |
Description |
scale |
number |
The scale according to which the y-axis is zoomed in/out. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.scaleY |
✔️ |
|
scaleZ
Zooms in/out the z-axis.
Reference
(scale: number) => Animation
Property |
Type |
Description |
scale |
number |
The scale according to which the z-axis is zoomed in/out. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.scaleZ |
✔️ |
|
skew
Skews the X- and Y-coordinates.
Reference
(ax: number, ay: number) => Animation
Property |
Type |
Description |
ax |
number |
The angle the x-coordinate is skewed. It ranges from -180 to 180. |
ay |
number |
The angle the y-coordinate is skewed. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.skew |
✔️ |
|
skewX
Skews the x-coordinate.
Reference
(angle: number) => Animation
Property |
Type |
Description |
angle |
number |
Skewed angle. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.skewX |
✔️ |
|
skewY
Skews the Y-coordinate.
Reference
(angle: number) => Animation
Property |
Type |
Description |
angle |
number |
Skewed angle. It ranges from -180 to 180. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.skewY |
✔️ |
|
step
It indicates the completion of a queue of animations. You can call as many animation methods as needed in a queue of animations. All animations in a queue start at the same time, and the next queue of animations will not start until the completion of the current queue.
Reference
(option?: StepOption) => Animation
Property |
Type |
option |
StepOption |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.step |
✔️ |
|
top
Sets the top value.
Reference
(value: string | number) => Animation
Property |
Type |
Description |
value |
string | number |
Length value. If number is input, px is used by default. Other length values in custom units can be passed. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.top |
✔️ |
|
translate
Translate
Reference
(tx?: number, ty?: number) => Animation
Property |
Type |
Description |
tx |
number |
If only this parameter is specified, translate along the x-axis by tx (in px).
|
ty |
number |
The distance to translate along the y-axis, in pixels. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.translate |
✔️ |
|
translate3d
Translates the x-, y-, and z-coordinates.
Reference
(tx?: number, ty?: number, tz?: number) => Animation
Property |
Type |
Description |
tx |
number |
The distance to translate along the x-axis, in pixels. |
ty |
number |
The distance to translate along the y-axis, in pixels. |
tz |
number |
The distance to translate along the z-axis, in pixels. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.translate3d |
✔️ |
|
translateX
Translates the x-axis.
Reference
(translation: number) => Animation
Property |
Type |
Description |
translation |
number |
The distance to translate along the x-axis, in pixels. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.translateX |
✔️ |
|
translateY
Translates the y-axis.
Reference
(translation: number) => Animation
Property |
Type |
Description |
translation |
number |
The distance to translate along the y-axis, in pixels. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.translateY |
✔️ |
|
translateZ
Translates the z-axis.
Reference
(translation: number) => Animation
Property |
Type |
Description |
translation |
number |
The distance to translate along the z-axis, in pixels. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.translateZ |
✔️ |
|
width
Sets the width.
Reference
(value: string | number) => Animation
Property |
Type |
Description |
value |
string | number |
Length value. If number is input, px is used by default. Other length values in custom units can be passed. |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Animation.width |
✔️ |
|
Parameters
StepOption
Property |
Type |
Required |
Description |
delay |
number |
No |
Animation delay time (in ms) |
duration |
number |
No |
Animation duration (in ms) |
timingFunction |
"linear" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-start" | "step-end" |
No |
Animation effect |
transformOrigin |
string |
No |
|
timingFunction
Property |
Description |
linear |
The animation keeps the same speed from start to end |
ease |
The animation starts slow, then speeds up, and then slows down before ending. |
ease-in |
The animation starts at low speed |
ease-in-out |
The animation starts and ends at low speed |
ease-out |
The animation ends at low speed |
step-start |
The first frame of the animation jumps to the end state until the animation ends |
step-end |
The animation remains the start state until the final frame jumps to the end state |
API Support
API |
WeChat Mini-Program |
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 |
✔️ |
|
|