网页动画资源

Web Animations API 提供了强大的基元来描述来自 JavaScript 的命令式动画，但这意味着什么呢？ 了解您可以使用的资源，包括 Google 的演示和 Codelab。

背景

该 API 的核心提供 Element.animate() 方法。我们来看一个示例，该示例将背景颜色从红色变为绿色：

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

所有现代浏览器都支持此方法，并具有出色的 polyfill 回退（稍后会详细介绍）。在 Chrome 39 中，已广泛支持此方法及其播放器对象。此功能还在 Opera 中原生提供，并且正在针对 Firefox 积极开发。 这是一个强大的基元，值得在工具箱中占据。

Codelab

越来越多的 Codelab 可用于 Web Animations API。这些指南属于自定进度的指南，演示了 API 中的不同概念。 在大多数 Codelab 中，您将获取静态内容，并通过动画效果对其进行增强。

如果您想了解 Web Animations 中可用的新基元，这些 Codelab 以及相关链接或资源绝对是您的不二之选。 要了解您可以构建什么内容，请查看这个受 Android 启发的揭秘效果：

因此，如果您刚刚起步，就不要再观望！

样本歌曲

如果您想寻找灵感，请务必查看 GitHub 上托管的源代码以 Material 为灵感来源的网页动画演示。 这些演示了各种令人惊叹的效果，并且您可以内嵌查看每个演示的源代码。

这些演示包括五彩缤纷的旋转银河系、旋转地球，甚至是在老旧元素上呈现多种效果。

聚酯纤维

为确保在所有现代浏览器中获得出色支持，您可以使用 polyfill 库。Web Animations API 现在提供 polyfill，它可支持所有现代浏览器，包括 Internet Explorer、Firefox 和 Safari。

如果您想尝试新鲜事物，可以使用 web-animations-next polyfill，它还包括尚未最终确定的功能，例如可组合的 GroupEffect 和 SequenceEffect 构造函数。 如需对比这两种 Polyfill，请参见首页。

您可以通过多种方式在代码中使用上述任一 polyfill。

1. 使用 CDN（如 cdnjs、jsDelivr），或通过 rawgit.com 定位特定版本

2. 通过 NPM 或 Bower 安装

    $ npm install web-animations-js
    $ bower install web-animations-js
    ```
   

在所有情况下，您都只需先将 polyfill 添加到脚本标记中，再添加任何其他代码，

<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
    document.body.animate([
    {'background': 'red'},
    {'background': 'green'}
    ], 1000);
</script>

其他资源

如果您想阅读偏技术性的介绍，请参阅 W3C 规范。

Dan Wilson 还在 Web Animations 上撰写了一系列精彩博文，包括如何将其与新的 CSS motion-path 属性结合使用。 有关使用 motion-path 的一些示例，请参阅 Eric Willigers 的文档。