网页动画资源

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,其中还包含尚未最终确定的功能,例如可组合的 GroupEffectSequenceEffect 构造函数。 如需对比这两种 polyfill,请参见首页

您可以通过几种方式在代码中使用 polyfill。

  1. 使用 CDN(例如 cdnjsjsDelivr),或通过 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 的文档