Web Animations API 入门教程第4部分: GroupEffects & SequenceEffects

发表于 | 更新于: | 分类于 |
字数统计: 1,007 | 阅读时长 ≈ 4

Web Animations API 入门教程第4部分: GroupEffects & SequenceEffects

这是 Web Animations API 入门教程系列的第4部分。我在2016年6月更新了系列内容，因为Chrome和Firefox都推出了主要更新（以及一些小规格更改）。如果您有想法或问题，或看到我已经误解了该规范，请在Twitter上与@dancwilson联系。

让我们继续讨论Web动画API中的多个动画，通过讨论今天在polyfill中提供的几个部分来提供分组和排序。

KeyframeEffects

A KeyframeEffect需要三个参数：动画元素(element)，关键帧数组(keyframes)和时间选项(timing options)。这些都是我们以前使用过的参数element.animate()。这个新对象本质上是单个动画的蓝图，当我们讨论分组(group)和队列(sequence)动画的方法时，我们会看到它。它不启动动画，它只是定义动画。

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 2规范中找不到，但是polyfill提供了一种组合动画并将其一起播放的方法。 GroupEffect（是的，它是未来将集成在Level 2规范）组合一个或多个KeyframeEffects同时播放。

一个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允许我们将多个动画（由KeyframeEffects 指定）组合在一起…不是并行播放它们，而是一个接一个地播放它们。您也可以按照polyfill中的定义将GroupEffect和SequenceEffect一起使用（例如具有多个序列的分组）。

队列提供给你一些我们必须用CSS或者我们在 animations API中看到的东西。我们必须根据早期动画的持续时间或使用 finish 回调来维持延迟。这些方法可能难以维护，或者不会如此精确。

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

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

创建动画的备用方法

我们以前看过element.animate()创建动画的方式。这是创建动画的快捷方式，立即播放，并获取Animation对象的引用。我们专注于这一点，因为Chrome支持了一段时间了，polyfill也是。Firefox是第一个支持替代方式的：·构造函数。它向我们展示了另一种使用方法KeyframeEffect，而且它在Level 1规范中，所以我们应该很快会看到它的更多应用。

首先提醒一下如何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规范通过工作草案时，我们应该看到更多关于这些不同效果的定义。本系列中还有两个计划的章节。下一次我们将再次看看未来，还有什么我们可以期待看到。

查看本系列的其余部分：

【翻译原文】：http://danielcwilson.com/blog/2015/09/animations-part-4/

0%