Web Animations API 概念

Web Animations API (WAAPI) 为 JavaScript 开发者提供了对浏览器动画引擎的访问权限，并描述了如何在跨浏览器之间实现动画。本文将介绍 WAAPI 背后的重要概念，为您提供对工作原理的理论理解，以便您可以有效地使用它。要了解如何使用 API，请查看其姊妹文章，使用 Web Animations API.

Web Animations API 弥合了声明式 CSS 动画和过渡与动态 JavaScript 动画之间的差距。这意味着我们可以使用它来创建和操作类似 CSS 的动画，这些动画从一个预定义的状态过渡到另一个状态，或者我们可以使用变量、循环和回调来创建交互式动画，这些动画可以适应和响应不断变化的输入。

历史

十多年前，同步多媒体集成语言，或 SMIL（发音为“微笑”），将动画带到了 SVG。当时，它是浏览器唯一需要担心的动画引擎。虽然五分之四的浏览器都支持 SMIL，但它只能对 SVG 元素进行动画处理，无法从 CSS 中使用，而且非常复杂——经常导致实现不一致。十年后，Safari 团队引入了 CSS 动画 和 CSS 过渡 规范。

Internet Explorer 团队请求一个动画 API 来整合和规范所有浏览器中的动画功能，因此，Mozilla Firefox 和 Google Chrome 开发者开始共同努力，创建一个可以统治所有动画规范的动画规范：Web Animations API。现在，我们有了 WAAPI，可以让未来的动画规范在其上搭载，从而保持一致并协同工作。它还提供了一个所有浏览器可以遵循的参考点，以配合当前可用的规范。

An illustration showing the Web Animations API ruling over CSS Transitions and Animations as well as a third category representing future animation specs with a question mark.

两种模型：计时和动画

Web Animations API 运行在两个模型之上，一个处理时间——计时——另一个处理时间推移中的视觉变化——动画。计时模型跟踪我们在预定的时间线上走了多远。动画模型确定动画对象在任何给定时间应该是什么样子。

计时

计时模型是使用 WAAPI 的基础。每个文档都有一个主时间线，Document.timeline，它从页面加载的那一刻开始一直持续到无穷——或者直到窗口关闭。我们的动画会根据它们的时间长度，沿着该时间线传播。每个动画都通过其 startTime 锚定到时间线中的一个点，代表动画开始播放时文档时间线上的时刻。

所有动画的播放都依赖于此时间线：在时间线上搜索动画会移动动画在时间线上的位置；减慢或加快播放速度会压缩或扩展它在时间线上的传播；重复动画会在时间线上排列起额外的迭代。将来，我们可能会拥有基于手势、滚动位置，甚至父时间线和子时间线的时间线。Web Animations API 开创了无限的可能性！

动画

动画模型可以看作是一组动画在任何给定时间可能是什么样子的快照，沿着动画的时间长度排列。

An illustration showing how the animation model can be visualized as a series of snapshots arranged along a timeline. In this case, pictures of the cheshire cat going from 0 (there) to 8 seconds (not all there—only his smile is left).

核心概念

Web 动画由时间线对象、动画对象和动画效果对象协同工作组成。通过组装这些不同的对象，我们可以创建我们自己的动画。

时间线

时间线对象提供了有用的属性 currentTime，它让我们看到页面已经打开的时间长度：它就是文档时间线的“当前时间”，该时间线从页面打开时开始。截至撰写本文时，只有一种时间线对象：基于活动文档的 timeline 的时间线对象。将来，我们可能会看到对应于页面长度的时间线对象，比如 ScrollTimeline，或者其他完全不同的东西。

动画

动画对象 可以想象成 DVD 播放器：它们用于控制媒体播放，但如果没有媒体要播放，它们就什么也做不了。动画对象以动画效果的形式接受媒体，特别是关键帧效果（我们一会儿会讲到它们）。就像 DVD 播放器一样，我们可以使用动画对象的函数来 播放、暂停、搜索，以及 控制动画的播放方向 和 速度。

An illustration likening how an Animation plays a KeyframeEffect like a DVD player plays a DVD.

动画效果

如果动画对象是 DVD 播放器，我们可以将动画效果或关键帧效果想象成 DVD。关键帧效果是一组信息，包括至少一组键和它们需要在其上进行动画处理的持续时间。动画对象接收这些信息，并使用时间线对象组装一个可播放的动画，我们可以查看和引用它。

目前，我们只有一种动画效果类型可用：KeyframeEffect。将来，我们可能会拥有各种动画效果——例如，用于分组和排序的效果，类似于我们在 Flash 中的功能。事实上，分组效果和排序效果已经在 Web Animations API 的正在进行的第 2 级规范中进行了概述。

从不同的部分组装动画

我们可以将所有这些部分组装在一起，使用 Animation() 构造函数 创建一个有效的动画，或者我们可以使用 Element.animate() 快捷函数。（有关如何使用 Element.animate() 的更多信息，请阅读 使用 Web Animations API。）

用途

API 允许创建动态动画，这些动画可以动态更新，还可以创建更直接的、声明式的动画，就像 CSS 创建的动画一样。它可以在自动化测试中使用，以确保您的 UI 动画正常运行。它打开了浏览器的渲染引擎，用于构建动画开发工具，例如时间线。它也是一个高效的基础，可以用来构建自定义或商业动画库。（参见 使用 Element.animate 尽情地进行动画。）在某些情况下，它可能会完全消除对完整库的需求，就像 Vanilla JavaScript 可以用于许多没有 jQuery 的目的。

参见