Web Animation API Tutorial 1: Creating a basic animation

Reprinted from Http://www.w3cplus.com/css3/web-animations-api-tutorial-part-1-creating-a-basic-animation.html

We've got a preliminary look at the content of the unified Web Animation API, but we haven't really explored the specifics of the specification, so let's get started.

Waapi gives you more controls than you use for CSS animations, but before we get to know them, let's start with the basics: How do I use this API to create a basic animation?

Create a keyframe animation

If you are familiar with CSS transition and animation, the following code should not look strange.

var player = document.getElementById (' Toanimate '). Animate ([{transform:' Scale (1) ', opacity:1, Offset:0}, {transform:' Scale (. 5) ', opacity:.5, offset: .3}, {transform: .667, offset: .7875}, {transform: .6, offset: 1}], {duration: 700, //milliseconds easing:  ' Ease-in-out ', //' linear ', a Bézier Curve, etc delay: 10, //milliseconds iterations:  Infinity, //or a number direction:  ' alternate ', //' Normal ', ' reverse ', etc. Fill:  ' forwards ' //' backwards ', ' both ', ' none ', ' Auto '})                 

For comparison purposes, create an equivalent CSS Keyframe animation

@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>                

We break the code down, and we'll explain it one piece at a time.

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

The animation animate() will return one to AnimationPlayer help us do some interesting things next, so you might want to create a variable to get AnimationPlayer the reference. Let's find the element we want to animate (we'll use it here document.getElementById ) and call the animate function. This function is a new addition to the specification, so you need to check its support/presence before use, or introduce Polyfill.

animateThe function passes two parameters, one is an KeyframeEffects array, and the other is an AnimationEffectTimingProperties option. Basically the first parameter maps to what you put @keyframes in the CSS, and the second parameter is what you will use in your CSS rules to animation-* specify the attributes (or animation shorthand, as I did earlier). One of the key benefits here is that we can use variables or reuse previously defined KeyframeEffects , and with CSS we will be restricted to use only the values we have defined previously.

var player = document.getElementById (  ' Toanimate '). Animate ([{transform: 1}, {transform: .5}, {transform: .667}, {transform:  .6}]);            

For each keyframeeffect , we turn the percent offset offset in CSS into a decimal value of 0 to 1 . It is optional, and if you do not specify any values, they will be evenly distributed (so if you have three, the first offset is 0 , the second offset is . 5 , and the third is 1 ). You can also specify a easing property, which is the same as animation-timing-function in CSS. Other properties in Keyframeeffect are also properties that you can add animations to. The value of each property should match the one you specified in JavaScript using Element.style , that is, the value of opacity should be a number, and transform The should be a string.

var player = document.getElementById(‘toAnimate‘).animate([], {    duration: 700, //milliseconds    easing: ‘ease-in-out‘, //‘linear‘, a bezier curve, etc. delay: 10, //milliseconds iterations: Infinity, //or a number direction: ‘alternate‘, //‘normal‘, ‘reverse‘, etc. fill: ‘forwards‘ //‘backwards‘, ‘both‘, ‘none‘, ‘auto‘ });

timingProperties are mapped to CSS animation properties, although sometimes with different names. Earlier code examples we discussed only the main options.

The following is an example of using Polyfill (but if you are viewing it in the latest chrome, it should be implemented using a native browser). The first column of gray squares is waapi, and the second column of Red Squares uses CSS keyframes.

Next section

Now that we know how to animate the same effect based on our known CSS, let's look at animate the object returned by the function AnimationPlayer . This is where it really boosts the functionality of the feature.

Web Animation API Tutorial 1: Creating a basic animation