值
idle-
动画的当前时间未确定，并且没有待处理的任务。
running-
动画正在运行。
paused-
动画已暂停，并且
Animation.currentTime属性未更新。 finished-
动画已达到其边界之一，并且
Animation.currentTime属性未更新。
以前，Web Animations 定义了一个 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 |
浏览器兼容性
加载中…
另见
- Web Animations API
- 用于控制网页动画的其他方法和属性的
Animation。