WeChat small program API animation

wx.createAnimation(OBJECT)

Create an animation instance animation. T he method that calls the instance describes the animation. Finally, the animation data is export animation property through the export method animation animation instance.

Note: export animation operation is cleared after each call by the export method

OBJECT parameter description:

TimingFunction Valid Value:

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, return themselves after the call ends, and support the writing of chain calls.

Method list of animation objects:

Style:

Rotating:

Scaling:

Offset:

Tilt:

Matrix deformation:

Animated queue

After calling the animation operation step() that a set of animations is complete, you can call any number of animation methods in a set of animations, all animations in a set of animations will start at the same time, and the next set of animations will not be performed until a set of animations is complete. Step can pass in a configuration parameter that is the same as wx.createAnimation() to specify the configuration of the current group animation.

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 () {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData:animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData:animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData:animation.export()
    })
  }
})

bug & tip

1. bug iOS/Android 6.3.30 separates animations by step(), and only the first animation takes effect