WeChat Open Platform

Mini Programs Documentation

Animation

wx.createAnimation(OBJECT)

Creates an animation instance. The instance call method describes the animation. Finally, the animation instance export method is used to export the animation data and deliver it to the component's animation attribute.

Note: Previous animation operations will be cleared after each time the export method is called.

OBJECT parameter descriptions:

Parameter Type Required Default value Description
duration Integer No 400 Animation duration, unit ms
timingFunction String No "linear" Defines animation effects
delay Integer No 0 Animation delay, unit ms
transformOrigin String No "50% 50% 0" Set transform-origin

timingFunction valid values:

Value Description
linear The speed of the animation is the same from start to finish
ease The animation starts slowly, then speeds up, then slows down before the end
ease-in The animation starts slowly
ease-in-out The animation starts and ends slowly
ease-out The animation ends slowly
step-start The first frame of the animation jumps to the end state until the end
step-end The animation remains in the start state, then jumps to the end state in the final frame
var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

animation

Animation instances can call the following methods to describe the animation. The call will return after it ends. The chain call writing method is supported.

Animation object method list:

Style:

Method Parameter Description
opacity value Transparency parameter range 0-1
backgroundColor color Color value
width length Length value, if a number is introduced then px is used as default, lengths with other custom units can be introduced
height length Length value, if a number is introduced then px is used as default, lengths with other custom units can be introduced
top length Length value, if a number is introduced then px is used as default, lengths with other custom units can be introduced
left length Length value, if a number is introduced then px is used as default, lengths with other custom units can be introduced
bottom length Length value, if a number is introduced then px is used as default, lengths with other custom units can be introduced
right length Length value, if a number is introduced then px is used as default, lengths with other custom units can be introduced

Rotation:

Method Parameter Description
rotate deg The degree range is -180 to 180, a degree angle rotating clockwise from the origin
rotateX deg The degree range is -180 to 180, a degree angle rotating on the x-axis
rotateY deg The degree range is -180 to 180, a degree angle rotating on the y-axis
rotateZ deg The degree range is -180 to 180, a degree angle rotating on the z-axis
rotate3d (x, y, z, deg) The same as transform-function rotate3d

Zoom:

Method Parameter Description
scale sx,[sy] When one parameter, this is expressed as the zoom sx factor on the x-axis and y-axis; when two parameters, this is expressed as the zoom sx factor on the x-axis and the zoom sy factor on the y-axis
scaleX sx Zoom sx factor on the x-axis
scaleY sy Zoom sy factor on the y-axis
scaleZ sz Zoom sy factor on the z-axis
scale3d (sx, sy, sz) Zoom sx factor on the x-axis, zoom sy factor on the y-axis, zoom sz factor on the z-axis

Offset:

Method Parameter Description
translate tx,[ty] When one parameter, this is expressed as offset tx on the x-axis, the unit is px; when two parameters, this is expressed as offset tx on the x-axis and offset ty on the y-axis, the unit is px.
translateX tx Offset tx on the x-axis, unit px
translateY ty Offset tx on the y-axis, unit px
translateZ tz Offset tx on the z-axis, unit px
translate3d (tx, ty, tz) Offset tx on the x-axis, offset ty on the y-axis, offset tz on the z-axis, unit px

Skew:

Method Parameter Description
skew ax,[ay] Parameter range -180 to 180; when one parameter, the y-axis coordinates remain unchanged while the x-axis coordinates are skewed ax degrees clockwise; when two parameters, they are skewed ax degrees on the x-axis and ay degrees on the y-axis respectively
skewX ax Parameter range -180 to 180; the y-axis coordinates remain unchanged while the x-axis coordinates are skewed ax degrees clockwise
skewY ay Parameter range -180 to 180; the x-axis coordinates remain unchanged while the y-axis coordinates are skewed ay degrees clockwise

Matrix transformation:

Method Parameter Description
matrix (a, b, c, d, tx, ty) The same as transform-function matrix
matrix3d The same as transform-function matrix3d

Animation queuing

After calling the animation operation method, step() must be called to show that a set of animations are complete. Any number of animation methods can be called from within a set of animations. All of the animations within a set will begin at the same time. The next set of animations can only be carried out after a set of animations has been completed. step can introduce configuration parameters like wx.createAnimation() that are used to specify the configurations for the current set of animations.

Example:

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    var 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: function () {
    // Rotate and zoom at the same time
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // First rotate then zoom
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // First rotate and zoom, then pan
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData: this.animation.export()
    })
  }
})

Bugs & Tips

  1. bug: When animations are divided into steps() in iOS/Android WeChat version 6.3.30, only the first step is effective.