How to realize animation Animation by WeChat Mini Programs

This article mainly explains "how to realize animation animation by WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how WeChat Mini Programs realizes animation animation"!

1. Create an animation instance

Wx.createAnimation (OBJECT)

Create an animation instance animation. Call the method of the instance to describe the animation. Finally, the animation data is exported to the animation attribute of the component through the export method of the animation instance.

Note: the export method clears the previous animation operation after each call.

Animation queue

After calling the animation operation method, you need to 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 the animations in a group of animations will start at the same time, and only after the completion of a group of animations will the next set of animations be carried out. Step can pass in the same configuration parameter as wx.createAnimation () to specify the configuration of the current group animation. Animation execution can be invoked through event binding animation.

The animation instance created can be described by calling the animation method, and it will return itself after the call, which supports the writing of chain calls.

Within the same animation instance, you can define multiple forms of motion and define multiple animations bound to different labels

Sample code:

Animation1: {} animation2: {} touch: function () {let animation1 = wx.createAnimation ({transformOrigin: "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%", duration: 1000, timingFunction: "ease", delay: 0}); animation2.opacity (0.7). Step ({duration: 1000}); this.setData ({animation2: animation2.export ()});}

two。 Call animation execution

2.1 bind Animation

Bind the created animation instance to the appropriate label

Sample code

2.2 trigger Animation

Call animation execution through page events

Sample code:

At this point, I believe you have a deeper understanding of "WeChat Mini Programs how to achieve animation animation", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!