Animation.playbackRate

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

Compatibilidad del navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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