网页动画资源

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

越来越多的 Codelab 可用于 Web Animations API。这些是自学指南，可演示 API 中的不同概念。 在这些 Codelab 中，您将学习如何使用动画效果来增强静态内容。

如果您想了解 Web 动画中可用的新原语，这些 Codelab 及相关链接或资源绝对是您的最佳起点。 如需了解您可以构建哪些内容，请查看以下受 Android 启发的显示效果：

Codelab 结果预览

如果您刚刚开始使用 Google Ads，那么您来对地方了！

演示

如果您想寻找灵感，请务必查看受 Material 启发的 Web 动画演示，其源代码托管在 GitHub 上。 这些演示展示了各种令人惊叹的效果，您可以内嵌查看每个演示的源代码。

这些演示包括色彩缤纷的旋转星系、旋转的地球，甚至只是一个普通元素上的各种效果。

polyfill

为了确保在所有现代浏览器中获得出色的支持，您可以使用 polyfill 库。Web Animations API 目前有 polyfill 可用，可将其引入所有现代浏览器，包括 Internet Explorer、Firefox 和 Safari。

如果您想尝试新功能，可以使用 web-animations-next polyfill，其中还包含尚未最终确定的功能，例如可组合的 GroupEffect 和 SequenceEffect 构造函数。如需比较这两个填充区，请参阅首页。

您可以通过多种方式在代码中使用任一填充。

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

  2. 使用 NPM 或 Bower 进行安装

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

在所有情况下，您只需在任何其他代码之前将填充区包含在脚本标记中即可。

<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 动画的精彩博文，包括如何将 Web 动画与新的 CSS motion-path 属性搭配使用。 如需查看使用 motion-path 的一些示例，请参阅 Eric Willigers 的文档。