Web Animation API from beginner to Theravada

This article is reproduced from Alloyteam:http://www.alloyteam.com/2015/12/web-animation-api-from-entry-to-the-top

Far View: Understanding Waapi

When we talk about webpage animation, it is natural to think of CSS3 animation, JS Animation, SVG animation, apng animation and other technology and jQuery.animate() other animation packaging library, according to the actual animation content design to choose a different way of implementation. However, each of the current animation technology has some shortcomings, such as CSS3 animation must go through JS to get dynamic change values, setInterval the time is often inaccurate and will also apng, the animation will bring large file size, the introduction of additional animation packaging library is not a performance-sensitive business application. At the moment, for developers, fish and paws don't seem to be both, and they want more powerful, convenient animation control, and a smooth, elegant performance and experience that would be great if there was a common animation solution natively supported by the browser.

The Web Animation API (referred to as Waapi) is due to this, it is committed to the collection of CSS3 animation performance, JavaScript flexibility, animation library rich and other director, will be as many animation control by the native browser implementation, and add many variables, controls, and/or options that the CSS does not have. Looks like everything is very good, is not later we in the animation technology selection can a recruit fresh to eat all over the day? Next, join me in knocking out the magic Gate of the Web Animation API.

Getting started: Starting with an instance

The core of WAAPI is to provide

Element.animate()

method, see the simplest example below:

document.body.animate(    [{‘background‘: ‘red‘}, {‘background‘: ‘green‘}, {‘background‘: ‘blue‘}]    , 3000);

With chrome 39 or more browsers running, the background color of the page is red, green and blue in turn, and 3s then end. Of course we are not satisfied with such a simple control parameter, continue to see the next example:

 var dot = document.queryselector ( "dot '); var frames = [{transform:  ' rotate (360deg) translate (80px) '},]; var timing = {duration: 2500, //ms delay: 0, //ms iterations: infinity, //1, 2, 3 ... Infinity direction:  ' alternate ', //' normal ', ' reverse ' and easing:  ' Ease-in-out ', //' linear ', ' ease-in ', etc. fill:  ' forwards ', span class= "comment" >//' backwards ', ' both ', ' none ', ' auto '}; Dot.animate (frames, timing);              

You can see the DOM node has a completely new animate method, the first parameter is a keyframe array frames[] , corresponding @keyframes to the CSS3, each frame description is very similar to the CSS3, the second parameter is the time control timing , including the duration duration, the iterations number of executions, directionanimation direction, easing easing function and other properties. is not much like CSS3 syntax, the above timing parameters are equivalent to:

.dot {  animation: frames 2500ms ease-in-out 0ms infinite alternate forwards;}

The effect is as follows:

Into the courtyard: fine number WAAPI the animation callback and animation state

In the initial example, we can define an object to receive Element.animate() the return value, such as:

var player = document.body.animate(/* ... */);

playerThat becomes an animation player object returned by the animation, and the animation starts playing. We need to understand the current state of the animation, which can be obtained by reading the object's read-only properties playState :

//"running","paused","finished"...

There are five states of the player, in addition to the three basic states of comments in the code, including "Idle" to return to the original state, "pending" means that playback or pause is about to occur.

There are four ways in which the player can change the current state of the animation.

//"paused"player.play();  //"running"player.cancel(); //"idle"player.finish(); //"finished"

Like CSS3 animations, player You can specify a function for the animation to end naturally or to end manually onfinish .

function(e) {    // ...}

Notice that the animation that sets the number Infinity of plays does not have a natural end time to call the onfinish function.

Time Control and Time axis

The player player has a read-write property playbackRate that controls the playback speed of the animation.

var player = element.animate(/* ... */);console.log(player.playbackRate); //1player.playbackRate = 2; 

playbackRateBy default 1 , you can speed up animations by setting larger integers, or you can slow the animation by setting a decimal number greater than 0.

playerThere are also two time-related read and write properties currentTime and startTime . The former returns the number of milliseconds the animation is currently in, its maximum value is set by the timing parameter delay+(duration*iterations) , and the set Infinity animation does not have currentTime the maximum value.

When set playbackRate , the animation currentTime does not change, the real change is the time axis, the playback speed changes so that the timeline is stretched or compressed accordingly.

The player can call reverse() flashbacks to play the animation, from the end of the timeline to the starting point, and currentTime the value back at the end of the animation 0 .

function() {    player.reverse();}

Multiple animations

CSS3 animations are capable of assigning multiple animations keyframes to a DOM node at the same time, and WAAPI also has the ability to apply multiple animations. The method is called multiple times on an element animate , that is, an element is implemented with more than one animation:

var animated = document.getElementById(‘toAnimate‘);var pulseKeyframes, activateKeyframes, haveFunKeyframes;var pulse = animated.animate(pulseKeyframes, 1000); var activate = animated.animate(activateKeyframes, 3000);var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

Each sub-animation also has independent timing parameters, as well as independent animation states (play, stop, Finish, cancel) and separate timeline (start time, playback speed, and end time) for easy animation for detailed control.

Higher-level interfaces

WAAPI also has timeline properties, the ability to group and sort animations, and the ability to move along a custom path (and no longer SVG), the light is exciting enough, but the space is limited.

Hall: Official case

Codelabs more and more codelabs instances are emerging based on WAAPI, and these examples are ideal for beginning contact with Waapi's classmates as a starting example.

Google's demos is a good source of inspiration if you want to challenge more cool animations with waapi, especially if you follow the material design style animations.

Theravada: Running on the mobile side

See here, believe that you have been more than once experience the WAAPI brought to the surprise. As an out-and-out mobile H5 development, I also want to apply WAAPI to the mobile business to serve users ... What the? No effect on the phone!

In order to use the WAAPI when the modern browser vendor has not fully followed up, we can choose to introduce the Polyfill library for the Web Animation API to experience the WAAPI on the Ie/firefox/safari and other browsers.

<script src=  "Https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js" > </ script><script> Document.body.animate ([{ ' background ':  ' red '}, { ' background ': 1000); SCRIPT>         

Mobile Browser, Android 5.0 or more Android browser and Chrome for Android itself has been supported Waapi, plus polyfill after the iOS safari is also supported. Don't forget, my big hand Q's X5 kernel browser.

At this point, the little friends finally showed a happy smile. Please look forward to the next article "Web Animation API from the Theravada to the book Ink".

Web Animation API from beginner to Theravada