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