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

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! (en-US)
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