对 Web 动画的原生支持最早在 Chrome 36 中推出,并在 Chrome 39 中更新为支持播放控制。Element.animate()
方法可用于直接从 JavaScript 触发命令式动画,其返回的对象可用于控制这些动画的播放。Web Animations W3C 规范的当前草稿中详细介绍了这些方法。
我们正在积极开发一种已发布的 polyfill,用于跟踪所有原生实现的 Web 动画功能,并且所有现代浏览器都支持该 polyfill。这些核心方法现已可供使用,值得成为您工具箱中的一员,助您打造可从动画中受益的丰富体验(例如 2015 年 Google I/O 大会 Web 应用)。
构造函数和组变更
Web 动画规范还介绍了组和序列,以及动画和播放器的构造函数。这些功能已在 web-animations-next polyfill 中提供,该 polyfill 旨在展示仍在讨论中且尚未原生实现的功能。为了回应开发者的反馈,开发 Web 动画的团队正在重命名这些功能,使其更易于理解。
FXTF 团队最近在澳大利亚悉尼举行了会议,并讨论了命名问题,因为许多开发者都提出了一些关于某些命名存在混淆问题的合理观点。因此,我们同意进行以下命名变更:
- Animation 已更名为 KeyframeEffect
- AnimationSequence 已更名为 SequenceEffect
- AnimationGroup 变为 GroupEffect
- AnimationPlayer 更名为 Animation
请注意,虽然动画及其播放器在 Chrome 中和 polyfill 中都是原生可用的,但目前它们是直接通过 Element.animate()
方法创建的。使用 Element.animate()
方法的现有代码无需更改。
新名称更准确地代表了每个对象提供的行为。例如,KeyframeEffect
用于描述可定位到 HTML 元素的基于关键帧的效果。与之相反,新的 Animation
对象表示动画处于多种状态(例如播放、暂停等)中的一种状态。
SourceCodeEffect
如果您通过 web-animations-next polyfill 使用了草稿规范的部分内容,则必须在废弃期内更新代码,以反映这些新名称。根据“polyfill 更改”政策,我们会为旧版本提供三个月的支持,如果您的网站使用已废弃的功能或名称,我们会提供控制台警告语句。
如果您非常想试用这些功能,请留意该兼容性插件的 v2 版本,以便使用这些新名称。最后,请务必订阅 web-animations-changes 群组,以了解任何其他变更。