这是介绍浏览器中web动画API的系列教程的第四篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson

我们来继续我们关于Web动画API中多动画的探讨，讨论一下现在polyfill中提供的分组和序列功能。

KeyframeEffects

KeyframeEffect传入三个参数：要添加动画的元素、关键帧数组、时间函数timing选项。这些参数都是我们之前使用element.animate()时就已经看过的。这个新对象基本上还是为单独动画绘制的蓝图，我们将会在讨论分组和序列的过程中了解。它不用于启动动画，只能定义动画。

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

尽管它目前还没有提供任何原生实现，甚至在规范Level 1中都找不到，但是polyfill提供了一种将动画分组并一起播放的方法。GroupEffect（即将在规范Level 2中面世）可以给一个或多个KeyframeEffect分组并使它们同时播放。

GroupEffect接受一个effects参数，我们可以把包括了多个动画的KeyframeEffect数组传入。定义好之后，就可以在就绪的时候在默认的时间轴上播放一整组动画。

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

和GroupEffect类似，SequenceEffect允许我们将多个动画组合在一起（由KeyframeEffect指定），但是它们不是平行播放的，而是一个接一个。你也可以，polyfill中有定义，将GroupEffect和SequenceEffect一起使用（例如拥有多个序列的同一分组）。

序列动画提供了一些和CSS类似的工作方法，或者是我们目前为止看到的统一动画API的内容。我们需要根据前一个动画的持续时间，或者使用finish回调，来维护动画的延迟时间。这些方法很难维护，而且可能并不精确。

使用之前GroupEffect代码段中的变量：

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

创建动画的另一种方法

前面我们已经看了使用element.animate()创建动画的方法。这是创建动画的一个比较快速的方法，马上创建马上播放，并获取AnimationPlayer对象的引用。我们一开始是比较关心animate()的，因为它得到Chrome的支持已经有一段时间了，还有polyfill。而Firefox则倾向于通过Animation构造的方法，但是目前还不能使用/演示（而且没有polyfill）。但是，我们会在这里简单介绍一下它，因为它向我们展示了另一种使用KeyframeEffect的方法，而且它在规范Level 1中也有，所以我们应该也很快就可以看到关于它的示例了。

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

首先是element.animate()的工作原理：

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

elem.animate(keyframes, timings);

使用和上面相同的变量，下面是使用Animation构造的等价代码：

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

这里的主要区别是，动画不是立即开始播放的，所以要提前创建后边播放的动画。

接下来

因为规范Level 2使得这个方法通过了工作草案，我们应该可以看到这些不同Effects的更多详细定义。本系列教程计划还有两篇文章。下次我们会再次看看，将来还有哪些内容是我们比较期待可以很快看到的。

本文根据@Dancwilson的《Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://danielcwilson.com/blog/2015/09/animations-part-4/。

彦子

在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢CSS喜欢JavaScript喜欢SVG，爱玩PS玩AI玩啊逗比的软件。努力向上，厚积薄发。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/web-animations-api-tutorial-part-4-groupEffects-and-sequenceEffects.htmlView products by sport