In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.