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 |
✔️ |
|
|
