Web Animation API Tutorials 4:groupeffects and Sequenceeffects

Reprinted from Http://www.w3cplus.com/css3/web-animations-api-tutorial-part-4-groupEffects-and-sequenceEffects.html

Let's continue our discussion of multiple animations in the Web Animation API, and discuss the grouping and sequencing features available in Polyfill now.

Keyframeeffects

KeyframeEffectPass in three parameters: the element to animate, the keyframe array, and the time function timing options. These are all the parameters we've seen before when we used them element.animate() . This new object is basically a blueprint for a separate animation, and we'll learn about the process of grouping and sequencing. It is not used to start animations, only animations can be defined.

var elem = document.getElementById(‘toAnimate‘);var timings = {  duration: 1000,  fill: ‘both‘}var keyframes = [ { opacity: 1 }. { opacity: 0 }];var effect = new KeyframeEffect(elem, keyframes, timings);

Groupeffects

Although it does not yet provide any native implementations, it is not even found in spec level 1, but Polyfill provides a way to group animations and play them together. GroupEffect(coming soon in spec level 2) You can assign one or more KeyframeEffect groupings and make them play simultaneously.

GroupEffectTo accept a effects parameter, we can pass in an array that includes multiple animations KeyframeEffect . Once defined, you can play a whole set of animations on the default timeline when you're ready.

var elem = document.getElementById(‘toAnimate‘);var elem2 = document.getElementById(‘toAnimate2‘);var timings = { duration: 1000}var keyframes = [ { opacity: 1 }. { opacity: 0 }];var kEffects = [ new KeyframeEffect(elem, keyframes, timings), new KeyframeEffect(elem2, keyframes, timings)];var group = new GroupEffect(kEffects);document.timeline.play(group);

Sequenceeffects

and GroupEffect Similarly, SequenceEffect allows us to combine multiple animations (by KeyframeEffect designation), but they are not played in parallel, but one by one. You can also, in Polyfill, have definitions that will be GroupEffect SequenceEffect used together with (for example, the same grouping with multiple sequences).

Sequence animations provide some working methods similar to CSS, or the content of the unified animation API we've seen so far. We need to maintain the delay time of the animation based on the duration of the previous animation, or by using a finish callback. These methods are difficult to maintain and may not be accurate.

Use GroupEffect the variables in the previous code snippet:

var sequence = new SequenceEffect(kEffects);document.timeline.play(sequence);

Another way to create an animation

We've seen the element.animate() way to create animations before. This is a quick way to create animations, immediately create a play immediately, and get a AnimationPlayer reference to the object. We were more concerned at first animate() because it has been supported by Chrome for some time and Polyfill. Firefox Animation , however, prefers to construct a method, but it is not yet available/demonstrated (and not polyfill). However, we will briefly introduce it here because it shows us another way to use it, KeyframeEffect and it is also available in spec Level 1, so we should also be able to see an example of it soon.

First a reminder of how element.animate() works:

The first is element.animate() how it works:

var elem = document.getElementById(‘toAnimate‘);var timings = {  duration: 1000,  fill: ‘both‘}var keyframes = [ { opacity: 1 }. { opacity: 0 }];elem.animate(keyframes, timings);

Using the same variables as above, here is Animation the equivalent code using constructs:

var kEffect = new KeyframeEffect(elem, keyframes, timings);var player = new Animation(kEffect, elem.ownerDocument.timeline);player.play();

The main difference here is that the animation does not start playing immediately, so create the animation that plays behind it in advance.

Next

Since Spec Level 2 allows this method to pass the work draft, we should be able to see more detailed definitions of these different effects. There are also two articles in this series of tutorials. Next time we will look again, what else in the future we can expect to see more quickly.

Web Animation API Tutorials 4:groupeffects and Sequenceeffects