Web Animation API Tutorial: summary

Reprinted from Http://www.w3cplus.com/css3/web-animations-api-tutorial-animations-conclusion.html

We've covered a lot of things earlier and want to be able to solve the problem of what the Web Animation API really is. In summarizing this series, we will review what we have discussed and then look at what has not been achieved.

Why bother about APIs?

In the introduction of the first article has discussed how the API came into being, in order to put CSS, JS, SVG animation methods to blend together, extract their advantages, provide a unified approach. This means that, for example, JavaScript can have the advantage of having CSS for years of hardware acceleration, and you don't need to tangle with CSS declarations. This API is not to replace libraries like GSAP, but to provide more choices at the browser level.

Firefox and Chrome have all started to work, and Edge has put it in to-dos. Polyfill allows us to use it now as a stereotyped specification.

Animation Basics

Create basic animations using a structure similar to CSS, implemented by providing keyframes and time functions.

var player = document.getElementById(‘toAnimate‘).animate([    { transform: ‘scale(1)‘, opacity: 1, offset: 0 }, { transform: ‘scale(.6)‘, opacity: .6, offset: 1 } ], { duration: 700, });

The timeline controls this piece, which is obviously not present in CSS. The state of the animation is playState read through attributes, such as play() ,, pause() , and finish() so on, to change the state of the animation. We can also playbackRate change the playback speed by the read/write properties, which can be slowed down. currentTimecan also be read/write, we can also onfinish set a callback at the end of the animation.

Multi-animation and grouping

The Web Animation API allows you to add multiple animations on one element, creating separate animation player. documenton the default timeline allows us to getAnimations() get all the animations through the method. Animations can be grouped with groupeffects and then played together, or used sequenceeffects one after another, explained in Part 4 (provided in Polyfill, but not in the first edition specification).

The path of motion and future development

Along the path animation, in this series of tutorials, you can see the effect of the initial implementation of the CSS, but there is still a lot of content is not implemented.

Key frame Spacing

The current implementation is to use the default spacing, which, if not set in KeyFrames offset , means that they are evenly distributed (for example, three-frame case is 0 , .5 1 offset). The specification also defines an animation that is based on an attribute step-by-step, so that it has a changing speed. The specification of spacing keyframes this piece to do a detailed explanation.

Promises

The specification has been developed to introduce a ready Promise, and this Promise is replaced every time the animation is canceled or entered pending state (usually before switching to "running" or "pause" state). Also, in this series we discuss not using onfinish callbacks, we will use finished promise to run a function after the end of an animation.

We'll go on to discuss the Web animation API next

We've started to talk about the API, and I hope that the heat will last. The content of the specification, the browser implementation, and the Polyfill have been there for some time, and they are ready to be reviewed by everyone.

Sometimes CSS is great and sometimes requestAnimationFrame good, sometimes using libraries is the best solution. The key is to figure out when to use which, this API provides quite a lot of things not provided before, so let's play well ~

Web Animation API Tutorial: summary