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 结果预览](https://developer.chrome.google.cn/static/docs/css-ui/web-animations-resources/image/preview-codelab-result-100183277695d.gif?authuser=5&hl=cs)
因此,如果您刚刚开始使用,那就再也不用犹豫了!
样本歌曲
如果您还想寻找灵感,请务必查看以 Material 为灵感来源的 Web 动画演示,其中包含 GitHub 上托管的源代码。 这些演示展现了各种令人惊叹的效果,并且您可以内嵌查看每个演示的源代码。
这些演示包括旋转星系、旋转地球,或者只是对普通的旧元素应用多种效果。
聚酯纤维
为确保在所有现代浏览器中都获得良好的支持,您可以使用 polyfill 库。Web Animations API 目前提供了一个 polyfill,可用于所有现代浏览器,包括 Internet Explorer、Firefox 和 Safari。
如果您喜欢尝试新鲜事物,可以使用 web-Animations-next polyfill,其中还包含尚未最终确定的功能,例如可组合的 GroupEffect
和 SequenceEffect
构造函数。如需对比这两种 polyfill,请参见首页。
您可以通过几种方式在代码中使用 polyfill。
使用 CDN(例如 cdnjs、jsDelivr),或通过 rawgit.com 定位到特定版本
通过 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 的文档。