使用 Web 动画 API - Web API | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。本文将通过有趣的 demo 和教学，以有趣的方式开启你对这片爱丽丝仙境的探索。
Web 动画 API将浏览器动画引擎向开发者打开，并由 JavaScript 进行操作。这些 API 被设计成 CSS Animations and CSS Transitions的接口，未来会对这些 API 做补充以丰富更多的功能。它是对网络上动画化的支持最有效的方式之一，让浏览器进行自己的内部，不需要 hacks，或者强迫，或者Window.requestAnimationFrame()。
通过 Web 动画 API，我们可以将交互式动画从样式表移动到 JavaScript，将表现与行为分开。我们不再需要依赖 DOM 重的技术，如将 CSS 属性和范围类写入元素来控制播放方向。与纯粹的声明式 CSS 不同，JavaScript 还允许我们动态地将属性值设置为持续时间。对于构建自定义动画库和创建交互式动画，Web 动画 API 可能是完成工作的完美工具。让我们看看它能做什么！
默认情况下，Firefox 48+ 和 Chrome 36+ 中提供了本文中讨论的基本 Web 动画 API 功能。Webkit 和 Edge 已经将 API 移动到各自的待办事项列表中，但是直到我们看到所有浏览器都有完整的支持，所以有一个便于维护的 polyfill（ handy maintained polyfill）可以测试功能支持，并在必要时添加它。
学习 Web 动画 API 的更为熟悉的方法之一是从大多数网络开发人员开始使用以前的 CSS 动画。CSS 动画有一个熟悉的语法，很好地分解为演示目的。
这是一个用 CSS 写的滚动动画，显示爱丽丝落下通向仙境的兔子洞（参见 Codepen 上的完整代码）：
请注意背景的移动，爱丽丝的旋转，以及她的颜色偏移变化。本教程我们将仅仅关注爱丽丝。这是控制爱丽丝动画的简化的 CSS：
这样可以以恒定的（线性）速率在 3 秒内改变爱丽丝的颜色和变换的旋转，并无限循环。在 @keyframes 块中，我们可以看到每个循环（约 0.9 秒）的 30％，Alice 的颜色从黑色变为深红色，然后在循环结束时再次返回。
现在让我们尝试使用 Web 动画 API 创建相同的动画。
我们首先要做的是创建一个对应于我们的 CSS @keyframes 块的关键帧对象：
这里我们使用一个包含多个对象的数组。每个对象代表原始 CSS 中的一个键。然而，与 CSS 不同，Web 动画 API 不需要明确地告知每个键出现的动画的百分比。它将根据你给出的按键数量自动将动画划分为相等的部分。这意味着具有三个键的关键帧对象将通过动画的每个循环的方式播放中间键，除非另有说明。
当我们想要明确地设置一个键与其他键的偏移量时，我们可以直接在对象中指定一个偏移量，并与逗号分隔。在上面的例子中，为了确保爱丽丝的颜色变化为 30％而不是 50％，我们给它的偏移量为 0.3。
必须至少指定两个关键帧（表示动画序列的开始和结束状态）.如果你的关键帧列表只有一个条目，Element.animate() 将抛出不支持的异常报错。
所以要回顾一下，除非你指定一个键上的偏移量，否则键的默认值是等间隔的。方便吗？
我们还需要创建一个定时属性的对象对应于爱丽丝动画中的值：
你会注意到这里有一些差异，如何在 CSS 中表示等价的值：
备注：CSS 动画中使用的属性值与 Web 动画中使用的属性值存在一些小的差异。比如，Web 动画中不能使用字符串“infinite”，而是使用 Javascript 的关键字 Infinity。以及我们用 easing 来代替timing-function。我们不必在这列出easing的值，因为不像在 CSS 动画里，默认的"animation-timing-function"是ease。页面动画 API 的默认 easing 是linear— 而这就是我们想要的。
是时候把这些特性结合到一起运用了 Element.animate() :
And boom: the animation starts playing (see the finished version on Codepen).
可以在可以使用 CSS 动画化的任何 DOM 元素上调用 animate() 方法。它可以用几种方式写成。我们可以直接像这样传递他们的值，而不需要为关键帧和时间属性创建对象：
更重要的是，如果我们只想指定动画的持续时间，而不是其迭代（默认动画迭代一次），我们可以单独传递毫秒：
虽然我们可以使用 Web 动画 API 编写 CSS 动画，其中 API 真正派上用场的是操纵动画的播放。Web 动画 API 提供了一些控制播放的有用方法。让我们来看看在 Growing / Shrinking Alice 游戏中暂停和播放动画（请查看 Codepen 上的完整代码）：
在这个游戏中，爱丽丝有一个动画，使她从小到大，我们通过一个瓶子和一个蛋糕控制。这两个都有自己的动画。
稍后我们会再讨论爱丽丝的动画，但现在我们来看看蛋糕的动画：
Element.animate() 方法会在调用后立即执行。为了防止蛋糕在用户有机会点击之前进食自己，我们调用 Animation.pause() ，如下：
我们可以运行 Animation.play() 方法：
特别地，我们想将其链接到爱丽丝的动画，所以当蛋糕被吃掉时，她变得更大。我们可以通过以下功能来实现：
当用户握住鼠标或者在触摸屏上按住他们的手指在蛋糕上时，我们现在可以调用 growAlice 来使所有动画发挥作用：
除了暂停和播放，我们可以使用以下动画方法：
让我们先来看一下 playbackRate——一个负值的播放速度将导致一个动画反向播放。当爱丽丝从瓶中喝酒时，她越来越小。这是因为瓶子将动画的播放速度从 1 更改为 -1：
在爱丽丝镜中奇遇记中，爱丽丝旅行到一个世界，她必须在场景中跑步——而且以两倍的速度快速前进！在红女王比赛的例子中，爱丽丝和红女王正在场景中跑步（查看 Codepen 上的完整代码）：
因为小孩子很容易疲惫不堪，不像自动机棋子，爱丽丝不断减速。我们已经通过在动画播放时设置了一个衰减代码：