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
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| Animation.matrix | ✔️ | | |
matrix3d
Similar to transform-function matrix3d.
Reference
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 | ✔️ | | |