Web Animations API入门教程第2部分：动画和时间线控制

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

Web Animations API入门教程第2部分：动画和时间线控制

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

现在我们了解如何使用Web Animations API 创建基本动画，让我们来谈谈状态（states），控制(controls)，回调(callback)和时间轴(timelines)。

Animations 播放状态和控制

当你调用时element.animate()，返回一个Animation对象（以前称为AnimationPlayerspec），动画开始播放。要查看动画的当前状态，您可以检查readonly属性playState，该属性将返回五个字符串之一。我们也可以通过调用四种方法之一修改动画的当前状态：

var player = element.animate(/* ... */);
console.log(player.playState); //"running"

player.pause(); //"paused"
player.play();  //"running"
player.cancel(); //"idle"... 跳到原始状态
player.finish(); //"finished"...跳到结束状态

此外running，paused，idle，和finished播放状态有一个pending状态定义当播放或暂停任务正在等待批准即将发生。

这个“步行圆圈”示例显示六个圆缩放。您可以暂停或播放每个圈子，以查看上述播放状态的一部分。

播放速率

在之前的CodePen示例中，还有一个“2x”按钮，您可以按更改动画的播放速度，将其切换到双倍速度。这是通过读/写playbackRate属性。

var player = element.animate(/* ... */);
console.log(player.playbackRate); //1

player.playbackRate = 2; //双倍速度, 也可以使用十进制数字控制它降低速度.

动画完成后的回调

使用CSS transitions，当转换结束时，通常会触发一个事件。类似地，Animation允许您指定一个onfinish函数，在动画完成或调用之前讨论过的finish()方法时调用它。请注意，根据规范，无法完成无限次迭代的动画集，也不能完成一个具有playbackRate = 0 的动画集。还有一个oncancel处理程序，以及在Animation完成时使用Promises的写法。

以下示例用于onfinish在动画完成后显示一些统计信息（并且它也很好地切换到下一次关于时间轴的讨论）。

时间轴

每个Animation都公开两个读/写时间相关属性 - currentTime和startTime。现在，我们将重点关注前者。

currentTime返回动画当前的毫秒数。最大值将为延迟时间 +（持续时间迭代次数）（`delay + (duration iterations)`），因此无限次迭代将不具有最大值。

var player = element.animate([
  {opacity: 1}, {opacity: 0}
], {
  duration: 1000,
  delay: 500,
  iterations: 3
});

player.onfinish = function() {
  console.log(player.currentTime); // 3500
};

播放速率将影响时间轴的持续时间。如果您将播放速度设置为10，则您的最大时间保持不变，但您的时间轴会快10倍。这个概念也在之前的“计时器倒计时”示例中显示。

由于currentTime是可 读/写，我们也可以使用它来跳转到时间轴中的某一点。它也可以让我们同步两个动画，如下例所示。

还有一个选项： reverse()

你也可以使用reverse()反转一个与之非常相似的动画play()（比如它会有相同的playState），除了它将以相反的方式遍历时间轴。当动画完成时，currentTime将为0。

下一节…

这包含了很多的信息，但仍然只是熟悉一下WAAPI有哪些可用的。下面我们来看一些更高级的用法。

查看本系列的其余部分：

【翻译原文】: http://danielcwilson.com/blog/2015/07/animations-part-2/

0%