MZhou's blog

Web Animations的命名简化

这篇文章翻译自HTML5Rocks的Simplified Concepts in Web Animations Naming

最早支持Web Animation的浏览器是Chrome 36,在Chrome 39中又更新了对播放的控制。在Javascript中我们可以调用Element.animate()方法来声明式地播放动画。详细的信息可以在W3C Web Animation规范中找到。

这里有一个正在开发中polyfill库,实现了Web Animation标准。所有的现代浏览器都支持它。核心方法现在都处于可用状态,十分推荐大家用它来构建富客户端的Web App。

Constructor和Group的变化

Web Animation标准同样也描述了动画的groups、sequences和constructors。这些特性可以在web-animations-next这个polyfill找到。这个polyfill被用来展示正在讨论中未被实现的特性。为了响应开发者的反馈信息,Web Animation的标准制作团队正在修改部分命名,使得其语义更加清晰易懂。

FXTF最近在澳大利亚悉尼举行了一次会面讨论重命名方案。很多开发者提出有些命名非常另人困惑。讨论之后对如下命名变化取得了一致同意:

记住只要是Chrome原生支持的Web Animation或者是polyfill提供的,都是通过Element.animate()来创建animation和player的。所以现有的使用Element.animate()的代码不需要改动。

新的命名更加贴切易懂,例如KeyframeEffect描述了HTML元素基于关键帧的动画效果。想对应的新Animation对象描述了动画的各种状态(例如playing、pause等等)。

对现有代码的影响

如果你正在基于web-animations-next这个polyfill来使用部分draft规范,你必须要更新你的代码来使用新的命名。因为polyfill修改策略的原因,我们将会依旧支持旧的版本,并且在你使用即将废弃的api和命名时打印出告警日志。

如果你想尝鲜新的特性和命名,那么可以使用v2版本的polyfill。最后请一定要订阅web-animations-changes小组来了解最新进展。

MZhou's blog - Taste of life.

zmmbreeze / @zhoumm