Web Animation: Learning to use the API

Reprinted from Http://www.w3cplus.com/animation/web-animations-learning-to-love-the-api.html

If you have used SVG, you should know that you can use SMIL to animate svg. Both CSS transitions and keyframes animations can manipulate CSS properties to add animations. requestAnimationFrame()allows the browser to request an action before it can be executed in the next frame.

But each of the animation technology is not perfect, each have their own problems.

Modern browsers are phasing out smil. Chrome has also long said that it wants to abandon smil, and since Blink to change, opera is the same, IE11 and edge have never implemented this piece, and I haven't found support for Smil in Firefox. There is a smil polyfill--fake SMILE, but does it make sense for developers to expect it to be executed and used in real production?

About Smil detailed, you can take the Zhang Xinxu Teacher's blog article (づ￣3￣) old.

Transitions and animations have always been in trouble to add prefixes.

Browser vendors sometimes add prefixes to experimental or non-standard CSS properties, so developers can experiment, but changes in browser behavior during standard processes do not break the code. Developers should wait until the introduction of the no-prefix attribute until the browser behaves standardized. Prefix (,,, -webkit- -moz- -o- -ms- ) reference Https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix.

The problem with vendor prefixes is that they are rarely discarded in order to support the widest possible range of users. In theory, when a technology is fully standardized, browser vendors should (or must) discard prefixes, but they do so only for the current version, and older versions still need to continue adding prefixes to the code.

So, when defining CSS animations, we have to add different browser prefixes as follows to get full support:

@-moz-keyframes identifier {/* for Firefox */0%{Top: 0; Left: 0; }30%{Top: 50px; }68%, 72%{Left: 50px; }100%{Top: 100px; Left: 100%; }}@-webkit-keyframes identifier {/* Chrome, Opera and Safari */0%{Top: 0; Left: 0; }30%{Top: 50px; }68%, 72%{Left: 50px; }100%{Top: 100px; Left: 100%; }}@keyframes identifier {/* Standards Compliant */0%{Top: 0; Left: 0; }30%{Top: 50px; }68%, 72%{Left: 50px;< Span class= "value" > } 100% {top : 100px;< Span class= "value" > left< span class= "rule" >: 100%; }}       

So we need to add -ms a prefix to cover the Microsoft series of browsers, and -o to overwrite the old Opera browser, that is, the opera kernel changed to blink version.

That's why Autoprefixer plug-ins or good automated build tools are born, so we write code.

requestAnimationFrame()is a great API, but all of its scripts are running on the page, and you only have 16.6ms the time to get everything done to let next frame join. If, for some reason, the scripts do not do their work within a given time, we are a bit tense in terms of animation, and slow and dull scripts block some of the activity on the page.

Understanding the Web Animation API

The Web Animation API (WAAPI) is a new JavaScript API designed to standardize how animations are created on the web. I suggest replacing SMIL (which is one of the reasons why SMIL is discarded in chrome and opera) and supporting CSS transitions and animations.

Alex Danilo introduced the Web Animation API (WAAPI) at the Google Developer Conference. This is a high level overview of the API, about how it works and where it can be used:

presentationWhat fascinates me most about Waapi is Rachel Nabors's speech in SFHTML5 in 2015. In addition to the Web animation very much passion, to the non-technical audience to do a very good explanation.

Video from YouTube, the celestial students browse, please bring your own ladder.

So now that we have a little more knowledge of WAAPI, let's take a look at how to make it work.

How it works

This section uses the code in Dan Wilson's web Animation API tutorial, which is shown here. All Web animation instances have 3 components. The first part is the declaration of the element we want to add animation to .animate() .

var player = document.getElementById(‘toAnimate‘).animate()

The animation function takes 2 a parameter. The first is an KeyframeEffects array that sets the location where you want the animation to take place, similar to the declaration in CSS @keyframes . When we look at the complete example, we find the difference.

The value of each property requires and how you use the element.style specified match in JavaScript, such as transparency to opacity accept a number number while accepting a transform string string .

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

The second parameter is a list of time functions. It maps to CSS animation properties, although sometimes the names are slightly different.

var player = document.getElementById(‘toAnimate‘).animate([ ],{    duration: 700, //毫秒    easing: ‘ease-in-out‘, //值为‘linear‘, 或贝塞尔曲线, 等等 delay: 10, //毫秒 iterations: Infinity, //或者为数字 direction: ‘alternate‘, //‘normal‘, ‘reverse‘, 等等. fill: ‘forwards‘ //‘backwards‘, ‘both‘, ‘none‘, ‘auto‘});

The complete example is as follows:

var player = document.getElementById (' Toanimate '). Animate ([{transform:' Scale (1) ', opacity:1, offset: 0}, {transform: .5, offset: .3}, {transform: .667}, {transform: .6}], {Durati On: 700, //milliseconds easing:  ' Ease-in-out ', //value is ' linear ', or Bézier curve, etc. delay: 10, //milliseconds iterations: infinity, //or for the number direction:  ' alternate ', //' normal ', ' reverse ', and so on. Fill:  ' forwards ' //' backwards ', ' both ', ' none ', ' auto '});    

In contrast, the same animation used to keyframes complete the following:

@keyframes Emphasis {0%{Transform: Scale1); Opacity: 1; }39%{Transform: Scale (.5); Opacity:.5; }78.75%{Transform: Scale (.667); Opacity:.667; }100%{Transform: Scale (.6);  opacity :  6;  }} #toAnimate Span class= "rules" >{animation: emphasis 700ms ease-in-out 10ms Infinite alternate forwards; }         /span>                

This is just a bit of a foundation, and we'll explore more grammatical aspects and how to improve it further.

Browser support situation?

Many of the new JavaScript APIs, browser support are inconsistent. Support for Web animations in Chrome is best (native) (including new opera), Firefox is limited for API support (see the is we animated yet documentation), and Edge is being developed. Safari is an exception, no support (currently or planned, none).

Supporting the API means a lot of problems. No browser can support the full specification, but you can use the following page to test which APIs your browser supports.

Test if your browser supports WAAPI required Polyfill

Polyfill is available on GitHub for browsers that do not support specifications (that is, do not support all features). There are several versions of Polyfill, and I am web-animation-next interested in this version. It supports the proposed functionality in the current specification, as well as the functionality that is still being discussed in the specification.

All of the features in our example can be native to Chrome or through Polyfill.

Web Animation: Learning to use the API