Chrome 50 中的 Web Animations 改进

Alex Danilo

Web Animations API 最初在 Chrome 36 中推出,可让用户在浏览器中方便地利用 JavaScript 控制动画,目前也正在 Gecko 和 WebKit 中实现。

Chrome 50 引入了一些变更,以改善与其他浏览器的互操作性并更加符合该规范。这些变更包括:

  • 取消活动
  • Animation.id
  • pause() 方法的状态更改
  • 弃用了虚线名称作为关键帧中的键

Chrome 51 中最终敲定了以下部分变更:

  • 移除虚线名称作为关键帧中的键

取消活动

Animation 接口包含一个取消动画的方法,叫做 cancel(),有点有趣的。Chrome 50 会在按照规范调用该方法时触发取消事件,这样一来,如果已初始化该属性,就会通过 oncancel 属性触发事件处理。

支持 Animation.id

使用 element.animate() 创建动画时,您可以传入许多属性。例如,下例展示了如何在对象上为不透明度添加动画效果:

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

通过指定 id 属性,您可以在返回的 Animation 对象上设置该属性,当您要处理大量 Animation 对象时,这有助于您调试内容。以下示例展示了如何为实例化的动画指定 id

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

暂停() 方法的状态更改

pause() 方法用于暂停正在进行的动画。如果您使用 playState 属性检查动画的状态,则应在调用 paused() 方法后将其设置为 paused。在 Chrome 50 之前的版本中,如果动画尚未开始播放,则 playState 属性会指示 idle,但现在它会反映正确的状态,即 paused

移除虚线名称作为关键帧中的键

为了进一步遵守该规范和其他实现方式,如果关键帧动画中的键使用虚线名称,Chrome 50 会向控制台发送警告。要使用的正确字符串是驼峰式大小写名称(根据 CSS 属性到 IDL 属性转换算法)。

例如,CSS 属性 margin-left 会要求您传入 marginLeft 作为键。

Chrome 51 完全取消了对虚线名称的支持,因此现在非常适合根据规范使用正确的命名来更正任何现有内容。

摘要

这些更改使得 Chrome 的网页动画实现更接近其他浏览器的实现,并且更符合相关规范,这一切都有助于简化网页内容创作,从而实现更好的互操作性。