Animation.playState

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

作为一个 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;
});

规范

Specification
Web Animations
# dom-animation-playstate

浏览器兼容性

BCD tables only load in the browser

参见