Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.
La propiedad Animation
.playbackRate
de la Web Animations API devuelve o establece la velocidad de reproducci贸n de la animaci贸n.
Las animaciones tienen un playback rate que proporciona un factor de escala para el cambio de velocidad de la animaci贸n timeline
valores del estado actual de la linea de tiempo de la animaci贸n. La velocidad de reproducci贸n inicial es 1
.
Sintaxis
var currentPlaybackRate = Animation.playbackRate; Animation.playbackRate = newRate;
Valor
Toma un n煤mero que puede ser 0, negativo o positivo. Los valores negativos invierten la animaci贸n. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicar铆a la velocidad de reproducci贸n.
si establecemos el playbackRate
a 0
pausa la animaci贸n de manera efectiva (sin embargo, su playstate
no se convierte necesariamente en paused
).
Ejemplos
En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animaci贸n de crecimiento de Alicia (aliceChange
) se invierta para reducirse:
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
}
// Con un toque o un click, Alicia se encoger谩.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo aliceChange
hacia adelante otra vez:
var growAlice = function() {
aliceChange.playbackRate = 1;
aliceChange.play();
}
// Con un toque o un click, Alicia crecer谩.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
En otro ejemplo, Red Queen's Race Game, Alicia y La Reina Roja est谩n ralentizandose constantemente:
setInterval( function() {
// Aseg煤rate de que la velocidad de reproducci贸n nunca descienda por debajo de .4
if (redQueen_alice.playbackRate > .4) {
redQueen_alice.playbackRate *= .9;
}
}, 3000);
Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su playbackRate
(velocidad de reproducci贸n):
var goFaster = function() {
redQueen_alice.playbackRate *= 1.1;
}
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
Especificaciones
Specification | Status | Comment |
---|---|---|
Web Animations La definici贸n de 'Animation.playbackRate' en esta especificaci贸n. |
Working 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
.