这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
动画
.playState
特性为
Web 动画 API
returns and sets an enumerated value describing the playback state of an animation.
This property is read-only for CSS Animations and Transitions.
var currentPlayState = Animation.playState; Animation.playState = newState;
idle
The current time of the animation is unresolved and there are no pending tasks.
running
The animation is running.
paused
Animation.currentTime
property is not updating.
finished
Animation.currentTime
property is not updating.
Previously, Web Animations defined a
pending
value to indicate that some asynchronous operation such as initiating playback was yet to complete. This is now indicated by the separate
Animation.pending
特性。
在 Growing/Shrinking Alice Game example, players can get an ending with Alice crying into a pool of tears . In the game, for performance reasons, the tears should only be animating when they're visible. So they must be paused as soon as they are animated like so:
// Setting up the tear animations
tears.forEach(function(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(function(el) {
el.play();
});
// Reset the crying tears animations and pause them.
tears.forEach(function(el) {
el.pause();
el.currentTime = 0;
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'playState' in that specification. |
工作草案 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
playState
|
Chrome
39
注意事项
|
Edge ≤79 |
Firefox
48
注意事项
|
IE 不支持 No |
Opera
26
注意事项
|
Safari 不支持 No |
WebView Android
39
注意事项
|
Chrome Android
39
注意事项
|
Firefox Android
48
注意事项
|
Opera Android
26
注意事项
|
Safari iOS 不支持 No |
Samsung Internet Android
4.0
注意事项
|
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
动画
for other methods and properties you can use to control web page animation.
动画