From (3°58 ’20 “N, 112°16′ 53” E) to (53°33 ‘34.51 “N,123°17’ 22.29” E) a song “Wild Wolf Disco” popular to the young and old.

In particular, the front end, look at you in front of you, on the left side of the IDE, a perfect interface (APP, web page) appears on the right side.

background

As the year draws to a close, companies will be combining animation with data to produce stunning year-end reports.

With an Animation, the programmer is an artist.

The body of the

Take the turntable component as an example to uncover the mystery of Animation in wechat mini program.

Animation

Please kindly ask Pighorn Animation wechat to provide me with an Animation development class, with which we can draw the turntable.

Step 1: The wx.createAnimation method is used to create the Animation class and set the base properties.

// Create an animationlet animationRun = wx.createAnimation({
        duration: 6,
        timingFunction: 'ease',
        delay:10,
        transformOrigin:"' 50% 50% 0 '"
      })
Copy the code

See the above code if you have a sense of deja vu, think, think again, give you a hint CSS3.

Css3 property Transition syntax

transition: property duration timing-function delay;

Copy the code

The conclusion seems to be that when you create an animation using wx.createAnimation, you are essentially building a CSS3 animation string.

The code above to create the animation is converted to

<style> Transition: 6000ms ease 10000ms; transition-property: transform; transform-origin: 50% 50% 0; -webkit-transition: 6000ms ease 10000ms; -webkit-transition-property: transform; -webkit-transform-origin: 50% 50% 0; </style>Copy the code

The animation.rotate method is used to set the rotation Angle of the disk.

let runDeg = 90
animationRun.rotate(runDeg).step();

Copy the code

The above code will add to the CSS animation string:

transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */Copy the code

Become a full CSS style

<style> transition: 6000ms ease 10000ms; transition-property: transform; transform-origin: 50% 50% 0; -webkit-transition: 6000ms ease 10000ms; -webkit-transition-property: transform; -webkit-transform-origin: 50% 50% 0; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ </style>Copy the code

The animation.step method is used to end one set of animations so that the next set can begin.

animationRun.rotate(runDeg).step()

Copy the code

This method merges multiple animation styles.

<style>
animation1;

animation2;

animation3;
</style>

Copy the code

Step 4: The animation.export method is used to export the Animation queue.

 this.setData({
        animationData: animationRun.export(),
        btnDisabled: 'disabled'
      });

Copy the code

This essentially assigns the full CSS3 style to the corresponding tag style, and opens debugging to view WXML.

Official explanation: Export the animation queue. The export method clears out previous animation operations after each call.

However, the same effect can be achieved if animationRun is assigned at the third step, which means that the animation has already been exported when step is called. (Of course, these are the author’s bold guesses combined with practice and did not get a reply from wechat.) In addition, there are also problems with the export method, which is not what the official said that the previous animation will be cleared. If you look at Wxml, the styles are still there. It should be a bug in wechat small program, which also brings a series of problems to the subsequent operation. For example, animation styles are already inline and custom styles are not easily overridden. (We also asked the wechat team first.)

When we use Animation, if we want to customize some CSS3 styles, we may encounter problems. We suggest that our code clear some styles.

conclusion

Animation is essentially a basic encapsulation of CSS3 Animation styles for flexible control in JS.

When you see a lot of simple but memorizable style code, try wrapping it up to make it more elegant.

The article ends with a dedicated turntable component. Complete code has been attached, like friends can quote.

Usage scenarios

Lucky draw

Click to view source code

Pay attention to our