Animation animation implementation for WeChat applet development

1. Create an animation instance

wx.createAnimation(OBJECT)

Create an animation instance animation. Call the instance's methods to describe the animation. Finally, the animation data is exported through the export method of the animation instance and passed to the animation property of the component.
Note: Each time the export method is called, the previous animation operation will be cleared

Animation Queue
After calling the animation operation method, step() must be called to indicate the completion of a group of animations, which can be done in a group If any number of animation methods are called in an animation, all animations in a group of animations will start at the same time, and the next group of animations will not proceed until one group of animations is completed. step can pass in a configuration parameter similar to wx.createAnimation() to specify the configuration of the current group animation. Animation execution can be called by binding animations to events.

The created animation instance can be described by calling the animation method. After the call is completed, it will return to itself, supporting chain call writing.
Within the same animation instance, you can define multiple motion forms and define multiple animations bound to different tags

Sample code:

animation1: {}
animation2: {}
touch: function () {
  let animation1 = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: 1000,
    timingFunction: "ease",
    delay: 0
  });
  animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
  this.setData({
    animation1: animation1.export()
  });
  let animation2 = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: 1000,
    timingFunction: "ease",
    delay: 0
  });
  animation2.opacity(0.7).step({ duration: 1000 });
  this.setData({
    animation2: animation2.export()
  });
}

2. Call animation execution

2.1 Bind animation

Bind the created animation instance to the corresponding label

Sample code

<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>

2.2 Trigger animation

Pass Page event calls animation execution

Sample code:

<view bindtap="touch"></view>

The above is the detailed content of Animation animation implementation for WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!