Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.
La propiedad Animation.startTime
de la interfaz 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.
El start time (tiempo de inicio) es el valor de tiempo de su DocumentTimeline
cuando su objetivo KeyframeEffect
est谩 programado para comenzar la reproducci贸n. El start time (tiempo de inicio) de una animaci贸n inicialmente no est谩 resuelto (lo que significa que es null
porque no tiene valor).
Sintaxis
var animationStartedWhen = Animation.startTime; Animation.startTime = newStartTime;
Valor
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.
Ejemplos
En el ejemplo Running on Web Animations API example, podemos sincronizar todos los nuevos gatos animados d谩ndoles el mismo tiempo de inicio startTime
que el gato original:
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 .cat#withWAAPI
newAnimationPlayer.startTime = catRunning.startTime;
// Agrega el gato a la pila.
WAAPICats.appendChild(newCat);
}
Especificaciones
Specification | Status | Comment |
---|---|---|
Web Animations La definici贸n de 'Animation.startTime' en esta especificaci贸n. |
Working Draft | Editor's draft. |
Compatibilidad del navegador
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 39.0 | 48 (48)[1] | Sin soporte | Sin soporte | Sin soporte |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | Sin soporte | 39.0 | 48.0 (48)[1] | Sin soporte | Sin soporte | Sin soporte | 39.0 |
[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 dom.animations-api.core.enabled
en true
, y puedes deshabilitarlo en cualquier versi贸n de Firefox estableciendo esta propiedad en false
.
Ver tambi茅n
- Web Animations API
Animation
Animation.currentTime
para el tiempo actual de la animaci贸n.