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
|
---
title: Animation.playState
slug: Web/API/Animation/playState
translation_of: Web/API/Animation/playState
---
<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
<p><br>
A propriedade <code><strong>Animation</strong></code><strong><code>.playState</code></strong> do <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> retorna e altera um valor enumerado que descreve o estado de reprodução da animação.</p>
<div class="note">
<p>Essa propriedade é apenas de leitura para Animações CSS e Transições.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">var<em> estadoAtualDaReproducao</em> = <em>Animation</em>.playState;
<em>Animation</em>.playState =<em>novoEstado</em>;
</pre>
<h3 id="Valor">Valor</h3>
<dl>
<dt><code>idle</code></dt>
<dd>O tempo atual da animação não está acertado e não há tarefas pendentes.</dd>
<dt><code>pending</code></dt>
<dd>A animação está aguardando a realização de algumas tarefas para ser completada.</dd>
<dt><code>running</code></dt>
<dd>A animação está rodando.</dd>
<dt><code>paused</code></dt>
<dd>A animação está parada e a propriedade {{domxref("Animation.currentTime")}} não está sendo atualizada.</dd>
<dt><code>finished</code></dt>
<dd>A animação alcançou um de seus finais e a propriedade {{domxref("Animation.currentTime")}} não está sendo atualizada.</dd>
</dl>
<h2 id="Exemplo">Exemplo</h2>
<p>No <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">jogo</a> <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , os jogadores podem chegar ao final com a <a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice chorando em uma poça de lágrimas</a>. No jogo, por razões de performance, as lágrimas só são animadas quando estão visiveis. Então elas devem ficar pausadas enquanto a animação ocorre, como no exemplo:</p>
<pre class="brush: js">// Configurando a animação das lágrimas
tears.forEach(function(el) {
el.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima
duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
el.playState = 'paused';
});
// Rodar as lágrimas caindo quando o final precisa aparecer.
tears.forEach(function(el) {
el.playState = 'playing';
});
// Reseta a animação e coloca o estado em pause.
tears.forEach(function(el) {
el.playState = "paused";
el.currentTime = 0;
});
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentários</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="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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] Antes do Chrome 50, este atributo retorna <code>idle</code> para animações que ainda não foram reproduzidas . A partir do Chrome 50, ele retorna <code>paused</code>.</p>
<p>[2] A Web Animations API está ativa por padrão apenas no Firefox Developer Edition e nas versões do Nightly. Você pode habilitá-la em versões beta configurando a preferência <code>dom.animations-api.core.enabled</code> para <code>true</code>, e também desativar em qualquer Firefox mudando esta mesma preferência para <code>false</code>.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}} para outros métodos e propriedades que você pode usar para controlar a animação da página web.</li>
<li>Os métodos {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}} conseguem alterar o <code>Animation</code>'s <code>playState</code>.</li>
</ul>
|
