{{APIRef("Web Animations")}}{{SeeCompatTable}}
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 {{domxref("DocumentTimeline", "timeline")}} valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es 1.
var currentPlaybackRate = Animation.playbackRate; Animation.playbackRate = newRate;
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 {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en paused).
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);
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('Web Animations', '#dom-animation-playbackrate', 'Animation.playbackRate')}} | {{Spec2("Web Animations")}} |