Animation.playState - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

作为一个 Web Animations API 的属性，Animation.playState能够返回并设置一个可枚举值来描述一个动画的回放状态。

这个属性只对CSS Animations 和 Transitions可读。

语法

var currentPlayState = Animation.playState;

Animation.playState = newState;

可能的值

idle

动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务。

pending

动画将一直等到某些等待中的任务完成方会执行。

running

动画处于正在运行状态。

paused

动画中止，并且Animation.currentTime该项属性不会更新。

finished

动画已经达到某一临界点，并且Animation.currentTime该项属性不会更新。

实例

在Growing/Shrinking Alice Game这个例子中, 玩家们可以凭Alice crying into a pool of tears结束游戏。出于性能原因，游戏里，眼泪只当可见之时才能运动。因此，这些泪滴必须在下面的情况下刚好暂停运动：

// 创建泪珠动画

tears.forEach(function(el) {
  el.animate(
    tearsFalling,
    {
      delay: getRandomMsRange(-1000, 1000), // 获取每一滴随机泪珠
      duration: getRandomMsRange(2000, 6000), // 获取每一滴随机泪珠
      iterations: Infinity,
      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
  el.playState = 'paused';
});


// 结尾需要现出时播放眼泪降落动画

tears.forEach(function(el) {
  el.playState = 'playing';
});


// 暂停并重置正在哭泣时的泪滴动画

tears.forEach(function(el) {
  el.playState = "paused";
  el.currentTime = 0;
});

规范

格式	状态	注解
Web Animations playState	Working Draft	Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	39.0 [1]	48 (48)[2]	未实现	未实现	未实现

Feature	Android	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	未实现	39.0 [1]	39.0 [1]	48.0 (48)[2]	未实现	未实现	未实现

[1] 在Chrome 50之前, idle 这项属性只用在还没开始的动画上，而在Chrome 50之后, 以 paused显示.

[2] 默认情况下，Web Animations API 只在Firefox Developer Edition 和 Nightly builds可用。您可以在测试版和公开版的设置里通过配置偏好来启用，将dom.animations-api.core.enabled 设为 true, 然后也可在任何版本的Firefox上通过设置为false来禁用它。

参见

• Web Animations API
• Animation 获取更多可用来控制网页动画的方法和属性
• Animation.play(), Animation.pause(), Animation.finish()，这些方法可以设置一个动画的 playState