简化网页动画命名中的概念

对网页动画的原生支持最初是在 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 群组,以了解任何其他变更信息。