Common User Interface Animations

In Mini Programs, you can use CSS transitions and CSS animations to create simple UI animations.

Preview with Developer Tool

You can also use the wx.createAnimation API to create simple animation effects dynamically.

During the animation creation, you can use bindtransitionend, bindanimationstart, bindanimationiteration, and bindanimationend to listen to animation events.

Event Description
transitionend A CSS transition ends or a step of wx.createAnimation ends
animationstart CSS animation starts
animationiteration A step of CSS animation ends
animationend A CSS animation ends

Note: These events are not bubbling events and need to be bound to the node that is being animated to take effect.

Advanced Animations

The above animations may not be applicable to complicated scenarios.

You can dynamically adjust the "style" property of a node by responding to events with WXS. Changing the value of "style" continuously can produce animation effects. And this method can be used to dynamically generate animations based on users' touch events.

Animation effects can also be achieved by using setData to change the user interface continuously. This can change the interface arbitrarily, but usually produces a large delay or stutter, and even causes the Mini Program to freeze. In this case, you can improve performance by changing the setData of the page to the setData in custom components. The following example shows how to generate a stopwatch animation using setData.

Preview with Developer Tool