Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize animation Animation by WeChat Mini Programs

2025-01-14 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)05/31 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report