网页动画资源

Sam Thorogood

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

可用于 Web Animations API 的 Codelab 数量会不断增加。这些指南是自定进度的指南，展示了 API 中的不同概念。 在大多数 Codelab 中，您都需要获取静态内容，并使用动画效果对其进行增强。

如果您想了解 Web Animations 中可用的新基元，那么这些 Codelab 以及相关链接或资源绝对是最佳起点。 如需了解您可以构建什么样的应用，不妨看看这个灵感来自 Android 的揭秘效果：

Codelab 结果预览

因此，如果您刚刚开始使用，那就再也不用犹豫了！

样本歌曲

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

这些演示包括旋转星系、旋转地球，或者只是对普通的旧元素应用多种效果。

聚酯纤维

为确保在所有现代浏览器中都获得良好的支持，您可以使用 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 的博文，包括介绍了如何将 Web Animations 与新的 CSS motion-path 属性结合使用。如需查看使用 motion-path 的一些示例，请参阅 Eric Willigers 的文档。