动画：playState 属性

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2020 年 3 月.

Web 动画 API 的只读Animation.playState 属性返回一个枚举值，该值描述了动画的播放状态。

值

idle

动画的当前时间未解析，并且没有挂起的任务。

running

动画正在运行。

paused

动画已暂停，并且Animation.currentTime 属性未更新。

finished

动画已到达其边界之一，并且Animation.currentTime 属性未更新。

以前，Web 动画定义了一个pending 值来指示某些异步操作（例如启动播放）尚未完成。现在，这由单独的Animation.pending 属性指示。

示例

在爱丽丝成长/缩小游戏示例中，玩家可以获得爱丽丝哭泣成泪水池的结局。在游戏中，出于性能原因，泪水应该只在可见时进行动画处理。因此，它们必须在动画化后立即暂停，如下所示

js
// Setting up the tear animations

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // randomized for each tear
    duration: getRandomMsRange(2000, 6000), // randomized for each tear
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// Play the tears falling when the ending needs to be shown.

tears.forEach((el) => {
  el.play();
});

// Reset the crying tears animations and pause them.

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});

规范

规范
Web 动画
# dom-animation-playstate

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅