Animation.playbackRate

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

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!

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: IngoBongo
 Última actualización por: IngoBongo,