blob: 8ad69e8ffa12280ae3876458b2bb61e1fe9e71ff (
plain)
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
|
---
title: Animation.startTime
slug: Web/API/Animation/startTime
tags:
- API
- Animacion
- Animaciones Web
- Experimental
- Interface
- Reference
- startTime
translation_of: Web/API/Animation/startTime
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
<p><span id="result_box" lang="es"><span>La propiedad <strong><code>Animation.startTime</code></strong> de la interfaz {{domxref ("Animación")}} es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.</span></span></p>
<p>El <strong>start time</strong> <strong>(tiempo de inicio)</strong> es el valor de tiempo de su {{domxref("timeline", "DocumentTimeline")}}cuando su objetivo {{domxref("KeyframeEffect")}} está programado para comenzar la reproducción. <span id="result_box" lang="es"><span>El </span></span><strong>start time</strong> <strong>(tiempo de inicio)</strong><span lang="es"><span> de una animación inicialmente no está resuelto (lo que significa que es <code>null</code> porque no tiene valor).</span></span></p>
<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
<pre class="syntaxbox">var <em>animationStartedWhen</em> = <em>Animation</em>.startTime;
<em>Animation</em>.startTime = <em>newStartTime</em>;</pre>
<h3 id="Valor">Valor</h3>
<p>Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/zxYexJ?editors=0010">Running on Web Animations API example</a>, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio <code>startTime</code> que el gato original:</p>
<pre class="brush: js">var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
/* Una función que crea nuevos gatos. */
function addCat(){
var newCat = document.createElement("div");
newCat.classList.add("cat");
return newCat;
}
/* Esta es la función que agrega un gato a la columna WAAPI */
function animateNewCatWithWAAPI() {
// crea unnuevo gato
var newCat = addCat();
// Animar a dicho gato con la función "animate" de WAAPI
var newAnimationPlayer = newCat.animate(keyframes, timing);
// Establece que el punto de inicio de la animación sea el mismo que el original<code class="language-js"><span class="comment token"> .cat#withWAAPI</span></code>
newAnimationPlayer.startTime = catRunning.startTime;<em><strong>
</strong></em>
// Agrega el gato a la pila.
WAAPICats.appendChild(newCat);
}
</pre>
<h2 id="Especificaciones"><span class="highlight-span"><span class="highlight-span">Especificaciones</span></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', '#dom-animation-starttime', 'Animation.startTime' )}}</td>
<td>{{Spec2('Web Animations')}}</td>
<td>Editor's draft.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_del_navegador"><span class="highlight-span"><span class="highlight-span">Compatibilidad del navegador</span></span></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)}}</td>
<td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(39.0)}}</td>
<td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(39.0)}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="highlight-span">Ver también</span></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.currentTime")}} para el tiempo actual de la animación.</li>
</ul>
|
