Animation.playState

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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

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

idle

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

pending

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

running

动画处于正在运行状态。

paused

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

finished

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

实例

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

js
// 创建泪珠动画

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
playState

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见