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