How to implement animation in WeChat applet

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

WeChat applet implements animation animation for details. The content is as follows

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

Animation queue

After calling the animation operation method, Call step() 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 the 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement verification code to obtain countdown effect through WeChat applet

ES6 iterator and for.of loop ( Detailed tutorial)

Using better-scroll scrolling plug-in in vue

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