WeChat mini-program animationAPI details and instance code sharing

This article mainly introduces the details of the mini-program animationAPI and the relevant information about the instance code. if you need more information, refer to the next article. it mainly introduces the details of the mini-program animation API and the related information about instance code sharing, for more information, see

The animation water is still quite deep. here we will just briefly introduce some of the animation attributes and precautions in the applet. before doing the animation, we must sort out the ideas and break down the animation step by step and then combine it! Here we will only introduce it.

Wx. createAnimation (object)

See Official Introduction

1. create an animation instance animation. Call the instance method to describe the animation. Finally, the animation data is exported to the animation attributes of the component through the export method of the animation instance.

2. after calling an animation operation method, you must call step () to indicate that a group of animations are completed. you can call any number of animation methods in a group of animations. all the animations in a group of animations start at the same time, after a group of animations is completed, the next group of animations is performed. Step: you can pass in the same configuration parameter as wx. createAnimation () to specify the attributes of the current animation group.

This is better understood, for example, the first corresponding code animation: this. animation. export ()
The second article, such as the scaling animation, is a group of scale, scaleX, scaleY... As an animation method for scaling an animation group, the scaling animation group and the rotating animation group are connected by step () and executed in order. Try it in the code! It is easier to understand the effect.

Main Attributes:

  
  
   
I am doing animation
  
 Rotate

Js

Page ({data: {text: "Page animation", animation: ''}, onLoad: function (options) {// parameters brought by Page initialization options for Page jump }, onReady: function () {// page rendering completed // instantiate an animation this. animation = wx. createAnimation ({// Animation duration, in ms, default value: 400 duration: 1000,/*** #, 0 ,. * linear animation has been relatively uniform * uniform from uniform speed to acceleration at a uniform speed * slow-in to uniform speed * slow-in-out from slow to uniform speed and then to slow **#* the step-start animation jumps to 100% from the beginning until the animation duration ends with a flash and * step-end keeps the style 0% until the animation duration ends with a flash */timingFunction: 'linear ', // How long will the delay start delay: 100,/*** use the base point for animation effect self-demonstration * left, center right is the horizontal direction value, the corresponding percentile is left = 0%; center = 50%; right = 100% * top center bottom is the vertical value, top = 0%; center = 50%; bottom = 100% */transformOrigin: 'Left top 0', success: function (res) {console. log (res) }},/*** rotate */rotate: function () {// rotate 10 degrees clockwise // this. animation. rotate (1, 150 ). step () this. setData ({// output animation: this. animation. export ()}, onShow: function () {// page display}, onHide: function () {// page hide}, onUnload: function () {// page closed }})

Demonstrate effects of multiple animation groups

}

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

The above is the detailed description of the mini-program animation API and the details of instance code sharing. For more information, see other related articles in the first PHP community!