Animation.playbackRate
Experimental
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
(en-US) 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
.