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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
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>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(39.0)}} [1]</td>
<td>{{CompatGeckoDesktop(48)}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(39.0)}} [1]</td>
<td>{{CompatChrome(39.0)}} [1]</td>
<td>{{CompatGeckoMobile(48)}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 在Chrome 50之前, <code>idle</code> 这项属性只用在还没开始的动画上，而在Chrome 50之后, 以 <code>paused显示</code>.</p>
<p>[2] 默认情况下，Web Animations API 只在Firefox Developer Edition 和 Nightly builds可用。您可以在测试版和公开版的设置里通过配置偏好来启用，将<code>dom.animations-api.core.enabled</code> 设为 <code>true</code>, 然后也可在任何版本的Firefox上通过设置为<code>false来</code>禁用它。</p>
<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>
|
