1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
title: Animation.playState
slug: Web/API/Animation/playState
tags:
- Animation
- animation api
- 动画
- 运动状态
translation_of: Web/API/Animation/playState
---
<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
<p>作为一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> 的属性，<code><strong>Animation</strong></code><strong><code>.playState </code></strong><code>能够返回并设置一个可枚举值来描述一个动画的回放状态。</code></p>
<div class="note">
<p>这个属性只对CSS Animations 和 Transitions可读。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">var<em> currentPlayState</em> = <em>Animation</em>.playState;
<em>Animation</em>.playState = <em>newState</em>;
</pre>
<h3 id="可能的值">可能的值</h3>
<dl>
<dt><code>idle</code></dt>
<dd>动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务。</dd>
<dt><code>pending</code></dt>
<dd>动画将一直等到某些等待中的任务完成方会执行。</dd>
<dt><code>running</code></dt>
<dd>动画处于正在运行状态。</dd>
<dt><code>paused</code></dt>
<dd>动画中止，并且{{domxref("Animation.currentTime")}}该项属性不会更新。</dd>
<dt><code>finished</code></dt>
<dd>动画已经达到某一临界点，并且{{domxref("Animation.currentTime")}}该项属性不会更新。</dd>
</dl>
<h2 id="实例">实例</h2>
<p>在<a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>这个例子中, 玩家们可以凭<a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice crying into a pool of tears</a>结束游戏。出于性能原因，游戏里，眼泪只当可见之时才能运动。因此，这些泪滴必须在下面的情况下刚好暂停运动：</p>
<pre class="brush: 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;
});
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">格式</th>
<th scope="col">状态</th>
<th scope="col">注解</th>
</tr>
<tr>
<td>{{SpecName('Web Animations', '#play-state', 'playState')}}</td>
<td>{{Spec2("Web Animations")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.Animation.playState")}}
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}} 获取更多可用来控制网页动画的方法和属性</li>
<li>{{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}}，这些方法可以设置一个动画的 <code>playState</code></li>
</ul>
|
