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
|
---
title: Animation.playState
slug: Web/API/Animation/playState
tags:
- API
- Animacion
- Animaciones Web
- Experimental
- Reference
- playState
translation_of: Web/API/Animation/playState
---
<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
<p>La propiedad <code><strong>Animation</strong></code><strong><code>.playState</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.</p>
<div class="note">
<p>Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.</p>
</div>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">var<em> currentPlayState</em> = <em>Animation</em>.playState;
<em>Animation</em>.playState = <em>newState</em>;
</pre>
<h3 id="Valor">Valor</h3>
<dl>
<dt><code>idle(inactivo)</code></dt>
<dd><span id="result_box" lang="es"><span>El tiempo actual de la animación no está resuelto y no hay tareas pendientes.</span></span></dd>
<dt><code>pending(pendiente)</code></dt>
<dd><span id="result_box" lang="es"><span>La animación está esperando que se complete una tarea pendiente.</span></span></dd>
<dt><code>running(funcionando)</code></dt>
<dd><span class="short_text" id="result_box" lang="es"><span>La animación se está ejecutando.</span></span></dd>
<dt><code>paused(pausado)</code></dt>
<dd><span id="result_box" lang="es"><span>La animación se ha suspendido y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.</span></span></dd>
<dt><code>finished(finalizado)</code></dt>
<dd><span id="result_box" lang="es"><span>La animación ha alcanzado uno de sus límites y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.</span></span></dd>
</dl>
<h2 id="Ejemplo">Ejemplo</h2>
<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) <a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice crying into a pool of tears</a>. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. <span id="result_box" lang="es"><span>Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:</span></span></p>
<pre class="brush: js">// <span class="short_text" id="result_box" lang="es"><span>Configurando las animaciones de lágrimas</span></span>
tears.forEach(function(el) {
el.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
el.playState = 'paused';
});
// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.
tears.forEach(function(el) {
el.playState = 'playing';
});
// Reinicia la animación de las lágrimas y la detiene.
tears.forEach(function(el) {
el.playState = "paused";
el.currentTime = 0;
});
</pre>
<h2 id="Especificaciones"><span class="highlight-span">Especificaciones</span></h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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="Compatibilidad_del_navegador"><span class="highlight-span">Compatibilidad del navegador</span></h2>
{{Compat("api.Animation.playState")}}
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}} <span id="result_box" lang="es"><span>para otros métodos y propiedades que puede usar para controlar la animación de la página web.</span></span></li>
<li>Los métodos {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}} pueden establecer el <code>playState</code> de un <code>Animation</code> .</li>
</ul>
|
