Animation.playbackRate
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La propiedad Animation.playbackRate
de la Web Animations API (en-US) 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.
Nota: 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 > 0.4) {
redQueen_alice.playbackRate *= 0.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 |
---|
Web Animations # dom-animation-playbackrate |
Compatibilidad con navegadores
BCD tables only load in the browser