Animation

Last updated: 2025-04-07 17:35:14
Animation
Last updated: 2025-04-07 17:35:14
createAnimation
This API is used via wx.createAnimation(Object object).
Feature Description: Creates an animation instance animation and invokes the instance's methods to depict the animation, before ultimately exporting the animation data through the instance's export method and passing it to the component's animation attribute.
Parameter and Description: Object.
Attribute
Type
Default value
Required
Note
duration
number
400
No
Animation duration, measured in milliseconds.
timingFunction
string
'linear'
No
Animation effect
delay
number
0
No
Animation delay duration, measured in milliseconds.
transformOrigin
string
'50% 50% 0'
No
-
Valid values of timingFunction
Value
Note
'linear'
The animation maintains a consistent speed from beginning to end.
'ease'
The animation starts at a slow pace, then accelerates, and finally decelerates before concluding.
'ease-in'
The animation starts at a slow pace.
'ease-in-out'
The animation starts and concludes at a slow pace.
'ease-out'
The animation concludes at a slow pace.
'step-start'
The animation leaps to its concluding state from the very first frame and maintains this until the end.
'step-end'
The animation consistently maintains its initial state, leaping to its concluding state only in the final frame.
Return Value：Animation.
Animation
Animation object.
Sample code
Corresponding WXML file
<view
  animation="{{animationData}}"
  style="background:red;height:100rpx;width:100rpx"
></view>
Corresponding js file
Page({
  data: {
    animationData: {}
  },
  onShow() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
﻿
    this.animation = animation
﻿
    animation.scale(2, 2).rotate(45).step()
﻿
    this.setData({
      animationData: animation.export()
    })
﻿
    setTimeout(function () {
      animation.translate(30).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale() {
    // Simultaneous rotation and enlargement
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale() {
    // Rotate first, then enlarge.
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate() {
    // Simultaneous rotation and enlargement before translation
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({duration: 1000})
    this.setData({
      animationData: this.animation.export()
    })
  }
})
.backgroundColor
The method is used via Animation.Animation.backgroundColor(string value).
Feature Description: Sets the background color.
Parameter and Description: string value, color value.
Return Value：Animation.
.bottom
This method is used via Animation.Animation.bottom(number|string value).
Feature Description: Sets the bottom value.
Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
Return Value：Animation.
.export
This API is used via Object Animation.export().
Feature Description: Exports the animation queue. The export method will clear the previous animation operations each time it is called.
Return Value: Object, animationData.
Attribute
Type
actions
Array.<Object>
.height
This method is used via Animation Animation.height(number|string value).
Feature Description: Sets height.
Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
Return Value：Animation.
.left
This method is used via Animation Animation.left(number|string value).
Feature Description: Sets the left value.
Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
Return Value：Animation.
.matrix
This API is used via Animation Animation.matrix().
Feature Description: Consistent with transform-function matrix.
Return Value：Animation.
.matrix3d
This API is used via Animation Animation.matrix3d()
Feature Description: Consistent with transform-function matrix.
Return Value：Animation.
.opacity
This method is used via Animation Animation.opacity(number value).
Feature Description: Sets the opacity.
Parameter and Description: number value, opacity, ranging from 0 to 1.
Return Value：Animation.
.right
This method is used via Animation Animation.right(number|string value).
Feature Description: Sets the right value.
Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
Return Value：Animation.
.rotate
This API is used via  Animation Animation.rotate(number angle).
Feature Description: Rotate one angle clockwise from the origin.
Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
Return Value：Animation.
.rotate3d
This API is used via Animation Animation.rotate3d(number x, number y, number z, number angle).
Feature Description: Rotates a degree clockwise from a fixed axis.
Parameter and Description: number x, the x-coordinate of the rotation axis; number y, the y-coordinate of the rotation axis; number z, the z-coordinate of the rotation axis; number angle, the degree of rotation. Range [-180, 180].
Return Value：Animation.
.rotateX
This API is used via Animation Animation.rotateX(number angle).
Feature Description: Rotates a degree clockwise from the X-axis.
Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
Return Value：Animation.
.rotateY
This method is used via Animation Animation.rotateY(number angle).
Feature Description: Rotates a degree clockwise from the Y-axis.
Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
Return Value：Animation.
.rotateZ
This Method is used via Animation Animation.rotateZ(number angle).
Feature Description: Rotates a degree clockwise from the Z-axis.
Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
Return Value：Animation.
.scale
This method is used via Animation Animation.scale(number sx, number sy).
Feature Description: Scaling.
Parameter and Description: number sx, when only sx parameter is present, it indicates scaling on the X and Y axes simultaneously by sx times; number sy, scaling on the Y axis by sy times.
Return Value：Animation.
.scale3d
This method is used via Animation Animation.scale3d(number sx, number sy, number sz).
Feature Description: Scaling.
Parameter and Description: number sx, the scaling factor for the x-axis; number sy, the scaling factor for the y-axis; number sz, the scaling factor for the z-axis.
Return Value：Animation.
 .scaleX
This method is used via Animation Animation.scaleX(number scale).
Feature Description: Scaling on the X-axis.
Parameter and Description: number scale, the scaling factor on the X-axis.
Return Value：Animation.
scaleY
This method is used via Animation Animation.scaleY(number scale).
Feature Description: Scaling on the Y-axis.
Parameter and Description: number scale, the scaling factor on the Y-axis.
Return Value：Animation.
.scaleZ
This method is used via Animation Animation.scaleZ(number scale).
Feature Description: Scaling on the Z-axis.
Parameter and Description: number scale, the scaling factor on the Z-axis.
Return Value：Animation.
.skew
This method is used via Animation Animation.skew(number ax, number ay).
Feature Description: Skews the coordinates on the X and Y axes.
Parameter and Description: number ax, tilt angle to X-axis coordinates, range [-180, 180]; number ay, tilt angle to Y-axis coordinates, range [-180, 180].
Return Value：Animation.
.skewX
This Method is used via Animation Animation.skewX(number angle).
Feature Description: Skews the coordinates on the X-axis.
Parameter and Description: number angle, tilt angle, range [-180, 180].
Return Value：Animation.
.skewY
This method is used via Animation Animation.skewY(number angle).
Feature Description: Skews the coordinates on the Y-axis.
Parameter and Description: number angle, tilt angle, range [-180, 180].
Return Value：Animation.
.step
This API is used via Animation Animation.step(Object object).
Feature Description: Indicates the completion of a set of animations. Any number of animation methods can be called within a set of animations. All animations in a set will start simultaneously, and the next set of animations will only proceed after the completion of the current set.
Parameter and Description: Object.
Attribute
Type
Default value
Required
Note
duration
number
400
No
Animation duration, measured in milliseconds.
timingFunction
string
'linear'
No
Animation effect
delay
number
0
No
Animation delay duration, measured in milliseconds.
transformOrigin
string
'50% 50% 0'
No
-
Valid values of timingFunction
Value
Note
'linear'
The animation maintains a consistent speed from beginning to end.
'ease'
The animation starts at a slow pace, then accelerates, and finally decelerates before concluding.
'ease-in'
The animation starts at a slow pace.
'ease-in-out'
The animation starts and concludes at a slow pace.
'ease-out'
The animation concludes at a slow pace.
'step-start'
The animation leaps to its concluding state from the very first frame and maintains this until the end.
'step-end'
The animation consistently maintains its initial state, leaping to its concluding state only in the final frame.
Return Value：Animation.
.top
This method is used via Animation Animation.top(number|string value).
Feature Description: Sets the top value.
Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
Return Value：Animation.
.translate
This method is used via Animation Animation.translate(number tx, number ty).
Feature Description: Translation and transformation.
Parameter and Description: number tx, when this is the only parameter, it represents the offset on the X-axis by tx, measured in pixels; number ty, the distance of translation on the Y-axis, measured in pixels.
Return Value：Animation.
.translate3d
This method is used via Animation Animation.translate3d(number tx, number ty, number tz).
Feature Description: Performs a translation transformation on the xyz coordinates.
Parameter and Description: number tx, when only this parameter is present, indicates an offset tx in the X-axis in px; number ty, the distance in the Y-axis in px; number tz, the distance in the Z-axis in px.
Return Value：Animation.
.translateX
This method is used via Animation Animation.translateX(number translation).
Feature Description: Performs a translation on the X-axis.
Parameter and Description: number translation, the distance of translation on the X-axis, measured in pixels.
Return Value：Animation.
.translateY
This method is used via Animation Animation.translateY(number translation).
Feature Description: Performs a translation on the Y-axis.
Parameter and Description: number translation, the distance of translation on the Y-axis, measured in pixels.
Return Value：Animation.
.translateZ
This method is used via Animation Animation.translateZ(number translation).
Feature Description: Performs a translation on the Z-axis.
Parameter and Description: number translation, the distance of translation on the Z-axis, measured in pixels.
Return Value：Animation.
.width
This method is used via Animation Animation.width(number|string value).
Feature Description: Sets the width.
Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
Return Value：Animation.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
Feedback
Attribute	Type	Default value	Required	Note
duration	number	400	No	Animation duration, measured in milliseconds.
timingFunction	string	'linear'	No	Animation effect
delay	number	0	No	Animation delay duration, measured in milliseconds.
transformOrigin	string	'50% 50% 0'	No	-
Value	Note
'linear'	The animation maintains a consistent speed from beginning to end.
'ease'	The animation starts at a slow pace, then accelerates, and finally decelerates before concluding.
'ease-in'	The animation starts at a slow pace.
'ease-in-out'	The animation starts and concludes at a slow pace.
'ease-out'	The animation concludes at a slow pace.
'step-start'	The animation leaps to its concluding state from the very first frame and maintains this until the end.
'step-end'	The animation consistently maintains its initial state, leaping to its concluding state only in the final frame.
tencent cloud

createAnimation

Animation

Sample code

.backgroundColor

.bottom

.export

.height

.left

.matrix

.matrix3d

.opacity

.right

.rotate

.rotate3d

.rotateX

.rotateY

.rotateZ

.scale

.scale3d

.scaleX

scaleY

.scaleZ

.skew

.skewX

.skewY

.step

.top

.translate

.translate3d

.translateX

.translateY

.translateZ

.width
