Implementation of animation animation in WeChat applet

This article mainly introduces in detail the method of realizing animation animation in WeChat applet. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Create 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: The export method will clear the previous animation operation after each call

Animation queue

Calling animation operation Step() must be called after the method to indicate the completion of a group of animations. 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 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 Corresponding tag

Sample code

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

2.2 Trigger animation

Calling animation execution through page events

Sample code:

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

Related recommendations:

Tutorial on using CSS animation animation

Use CSS3 animation animation properties to implement carousel images Detailed explanation of the effect method

Introduction to the skillful use of css3 animation animation special effects plug-in

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