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 的网页动画实现更接近其他浏览器的实现,并且更符合相关规范,这一切都有助于简化网页内容创作,从而实现更好的互操作性。