Animation

createAnimation

TIP

The API usage is as follows: wx.createAnimation(Object object)

Functional description: Create an animation instance animation Call the instance method to describe the animation. Finally, export the animation data through the export method of the animation instance and pass it to the animation property of the component.
Parameters and descriptions: Object object

Properties	Type	Default value	Required	Description
duration	number	400	No	Animation duration, unit: ms
timingFunction	string	'linear'	No	Animation effect
delay	number	0	No	Animation delay time, unit: ms
transformOrigin	string	'50% 50% 0'	No	-

Legal value of timingFunction

Value	Description
'linear'	The speed of the animation from beginning to end is the same
'ease'	The animation starts at a low speed, then speeds up, and slows down before the end
'ease-in'	Animation starts at a low speed
'ease-in-out'	Animation starts and ends at a low speed
'ease-out'	Animation ends at a low speed
'step-start'	The animation jumps to the end state in the first frame until the end
'step-end'	The animation remains in the start state, and the last frame jumps to the end state

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

TIP

The API usage is as follows: Animation Animation.backgroundColor(string value)

Functional description: Set the background color.
Parameters and descriptions: string value, Color value.
Return value: Animation

.bottom

TIP

The API usage is as follows: Animation Animation.bottom(number|string value)

Functional description: Set the bottom value.
Parameters and descriptions: number|string value, Length value. If number is passed, px is used by default. You can pass in other custom length values.
Return value: Animation

.export

TIP

The API usage is as follows: Object Animation.export()

Functional description: Export animation queue. Each call to the export method will clear the previous animation operation.
Return value: Object，animationData。
Properties Type
actions Array.<Object>

Properties	Type
actions	Array.<`Object`>

.height

TIP

The API usage is as follows: Animation Animation.height(number|string value)

Functional description: Set height
Parameters and descriptions: number|string value, Length value. If number is passed, px is used by default. You can pass in other custom length values.
Return value: Animation

.left

TIP

The API usage is as follows: Animation Animation.left(number|string value)

Functional description: Set the left value
Parameters and descriptions: number|string value, Length value. If number is passed, px is used by default. You can pass in other custom length values.
Return value: Animation

.matrix

TIP

The API usage is as follows: Animation Animation.matrix()

Functional description: transform-function matrix same.
Return value: Animation

.matrix3d

TIP

The API usage is as follows: Animation Animation.matrix3d()

Functional description: transform-function matrix same.
Return value: Animation

.opacity

TIP

The API usage is as follows: Animation Animation.opacity(number value)

Functional description: Set transparency
Parameters and descriptions: number value, Transparency, range 0-1.
Return value: Animation

.right

TIP

The API usage is as follows: Animation Animation.right(number|string value)

Functional description: Set right value
Parameters and descriptions: number|string value Length value. If number is passed, px is used by default. You can pass in other custom length values.
Return value: Animation

.rotate

TIP

The API usage is as follows: Animation Animation.rotate(number angle)

Functional description: Rotate an angle clockwise from the origin.
Parameters and descriptions: number angle Angle of rotation. Range [-180, 180].
Return value: Animation

.rotate3d

TIP

The API usage is as follows: Animation Animation.rotate3d(number x, number y, number z, number angle)

Functional description: Rotate one angle clockwise from the fixed axis.
Parameters and descriptions: 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 angle of rotation. Range [-180, 180].
Return value: Animation

.rotateX

TIP

The API usage is as follows: Animation Animation.rotateX(number angle)

Functional description: Rotate one angle clockwise from the X axis.
Parameters and descriptions: number angle Angle of rotation. Range [-180, 180].
Return value: Animation

.rotateY

TIP

The API usage is as follows: Animation Animation.rotateY(number angle)

Functional description: Rotate one angle clockwise from the Y axis.
Parameters and descriptions: number angle Angle of rotation. Range [-180, 180].
Return value: Animation

.rotateZ

TIP

The API usage is as follows: Animation Animation.rotateZ(number angle)

Functional description: Rotate one angle clockwise from the Z axis.
Parameters and descriptions: number angle Angle of rotation. Range [-180, 180].
Return value: Animation

.scale

TIP

The API usage is as follows: Animation Animation.scale(number sx, number sy)

Functional description: Scaling
Parameters and descriptions: number sx When there is only the sx parameter, it means scaling the sx multiple on both the X and Y axes; number sy, scaling the sy multiple on the Y axis.
Return value: Animation

.scale3d

TIP

The API usage is as follows: Animation Animation.scale3d(number sx, number sy, number sz)

Functional description: Scaling
Parameters and descriptions: number sx The scaling multiple of the x axis; number sy, the scaling multiple of the y axis; number sz, the scaling multiple of the z axis.
Return value: Animation

.scaleX

TIP

The API usage is as follows: Animation Animation.scaleX(number scale)

Functional description: Scale X axis
Parameters and descriptions: number scale The scaling multiple of the X axis.
Return value: Animation

.scaleY

TIP

The API usage is as follows: Animation Animation.scaleY(number scale)

Functional description: Scale Y axis
Parameters and descriptions: number scale The scaling multiple of the Y axis.
Return value: Animation

.scaleZ

TIP

The API usage is as follows: Animation Animation.scaleZ(number scale)

Functional description: Scale Z axis
Parameters and descriptions: number scale The scaling multiple of the Z axis.
Return value: Animation

.skew

TIP

The API usage is as follows: Animation Animation.skew(number ax, number ay)

Functional description: Tilt X and Y axis coordinates
Parameters and descriptions: number ax The tilt angle of the X axis coordinate, range [-180, 180]; number ay, the tilt angle of the Y axis coordinate, range [-180, 180].
Return value: Animation

.skewX

TIP

The API usage is as follows: Animation Animation.skewX(number angle)

Functional description: Tilt the X axis coordinate.
Parameters and descriptions: number angle Tilt angle, range [-180, 180].
Return value: Animation

.skewY

TIP

The API usage is as follows: Animation Animation.skewY(number angle)

Functional description: Tilt the Y axis coordinate.
Parameters and descriptions: number angle Tilt angle, range [-180, 180].
Return value: Animation

.step

TIP

The API usage is as follows: Animation Animation.step(Object object)

Functional description: Indicates that a group of animations is completed. You can call any number of animation methods in a group of animations. All animations in a group of animations will start at the same time. The next group of animations will be started after a group of animations is completed.

Parameters and descriptions: Object object。

Properties	Type	Default value	Required	Description
duration	number	400	No	Animation duration, unit: ms
timingFunction	string	'linear'	No	Animation effect
delay	number	0	No	Animation delay time, unit: ms
transformOrigin	string	'50% 50% 0'	No	-

Legal value of timingFunction

Value	Description
'linear'	The speed of the animation from beginning to end is the same
'ease'	The animation starts at a low speed, then speeds up, and slows down before the end
'ease-in'	Animation starts at a low speed
'ease-in-out'	Animation starts and ends at a low speed
'ease-out'	Animation ends at a low speed
'step-start'	The animation jumps to the end state in the first frame until the end
'step-end'	The animation remains in the start state, and the last frame jumps to the end state

Return value: Animation

.top

TIP

The API usage is as follows: Animation Animation.top(number|string value)

Functional description: Set top value
Parameters and descriptions: number|string value， Length value. If number is passed, px is used by default. You can pass in other custom length values.
Return value: Animation

.translate

TIP

The API usage is as follows: Animation Animation.translate(number tx, number ty)

Functional description: Translate transform
Parameters and descriptions: number tx， When only this parameter is used, it means the X axis offset tx, unit px; number ty, the translation distance on the Y axis, unit px.
Return value: Animation

.translate3d

TIP

The API usage is as follows: Animation Animation.translate3d(number tx, number ty, number tz)

Functional description: Translate the xyz coordinates.
Parameters and descriptions: number tx， When only this parameter is used, it indicates the X-axis offset tx, in px; number ty, the distance of translation on the Y-axis, in px; number tz, the distance of translation on the Z-axis, in px.
Return value: Animation

.translateX

TIP

The API usage is as follows: Animation Animation.translateX(number translation)

Functional description: Translation on the X-axis.
Parameters and descriptions: number translation Translation on the X-axis, in px.
Return value: Animation

.translateY

TIP

The API usage is as follows: Animation Animation.translateY(number translation)

Functional description: Translation on the Y-axis.
Parameters and descriptions: number translation Translation on the Y-axis, in px.
Return value: Animation

.translateZ

TIP

The API usage is as follows: Animation Animation.translateZ(number translation)

Functional description: Translation on the Z-axis.
Parameters and descriptions: number translation Translation on the Z-axis, in px.
Return value: Animation

.width

TIP

The API usage is as follows: Animation Animation.width(number|string value)

Functional description: Set the width. Use the following method.
Parameters and descriptions: number|string value Length value. If number is passed, px is used by default. You can pass in other custom length values.
Return value: Animation

Animation ​

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 ​

Animation

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