Detailed description of the animation effect of WeChat applets

This article describes how to implement the animation effect of a applet and how it works. It has some reference value. let's take a look at it together with the small editor. Preface

The company plans to change from H5 page to mini-program writing. So I am working on developing small programs. I am not a front-end master, but a scum that writes back-end occasionally to the front-end. Please do not spray at the front-end.

1. what is a small program?

In my understanding, applets are only highly encapsulated H5, which encapsulates various components. According to the official statement, the applet program is not in the browser. It's a plug-in.

2. small programs cannot manipulate DOM

Small programs cannot directly manipulate the DOM, encouraging data binding. For example, vue. js. Therefore, I personally feel that developers who are used to using JQ to manipulate DOM are not used to it. A habit process is required.

3. small programs cannot reference JQ

Although small programs can reference external JS. However, an exception occurs when I reference it. It may need to be modified before it can be used. I thought it was a small program. Let's move on to the set of mini programs. So let's look at the small program's API.

4. Use a applet to implement basic switching animation

Html code

From the code above, we can see that I used checkCodeBtnOpacity and checkCodeOpacity respectively to control the transparency of the two blocks. Used to hide.

Use animationData to save animation data.

Then bindGetCheckCode is bound with a click event.

Then, the API wx. createAnimation is called, opacity (1) is called for display, and the translateY (-100) Y axis translation is called for an increase.

Related API parameters can view the applet API documentation, address: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html? T = 2017112 # wxcreateanimationobject

Next, call this. setData () to modify the data source. The animation is switched.

For more details about the animation effects of small programs, please follow the PHP Chinese network!