Implement animation in a small program

This time I will bring you how to implement animation in a small programAnimation, what are the precautions for implementing animation in a small program, the following is a practical case, let’s take a look one time.

WeChat applet implements animation animation, the specific content is as follows

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 attribute 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 animation through Event.

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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

React server rendering

How to develop a WeChat applet to obtain user personal information

Vue2.5 and Element UI component paging function implementation

The above is the detailed content of Implement animation in a small program. For more information, please follow other related articles on the PHP Chinese website!