Window.requestAnimationFrame()

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Sumario

window.requestAnimationFrame informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación. El método acepta como argumento una función a la que llamar antes de efectuar el repintado.

Nota: Si no quieres que tu animación se detenga, debes asegurarte de  llamar a su vez a requestAnimationFrame() desde tu callback.

Debes llamar a este método cuando estés preparado para actualizar tu animación en la pantalla para pedir que se programe el repintado. Ésto puede suceder hasta 60 veces por segundo en pestañas en primer plano, pero se puede ver reducido a velocidades inferiores en pestañas en segundo plano.

El método indicado como callback recibe un único argumento que indica el tiempo en el que está programado que se ejecute el ciclo de animación.

Nota: Este método, así como la propiedad window.mozAnimationStartTime en Firefox, es experimental y no estándar. Está destinado a que experimentes con él y puedas compartir tus impresiones. Cabe la posibilidad que no se soporte a largo plazo, pero esperamos que esta API o alguna similar termine por estandarizarse.

Sintaxis

requestID = window.mozRequestAnimationFrame(callback);   // Firefox
window.msRequestAnimationFrame(callback);                // IE 10 PP2+
window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit

Parámetros

callback
Parámetro que especifica la función a la cual llamar llegado el momento de actualizar tu animación para el próximo repintado.
element Optional
Parámetro opcional (no utilizado en Firefox ni en IE) que especifica el elemento que limita visualmente toda la animación. Para canvas y WebGL, este elemento debería ser el propio elemento <canvas>. Para otros elementos, puedes omitir este parámetro o ofrecerlo para una experiencia ligeramente más optimizada.

Valor devuelto

requestID es un entero de tipo long que identifica de manera exclusiva la entrada en la lista de callbacks. Es siempre un distinto de cero, pero no debes realizar ninguna otra suposición acerca de su valor. Puedes pasar este valor a window.cancelAnimationFrame() para cancelar la petición de actualización del callback.

Ejemplo

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

Compatibilidad entre Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 21.0 webkit 14.0 moz 10.0 Not supported 6.0 webkit
requestID return value ? 11.0 (11.0) moz ? ? ?
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Not supported 10.0 webkit

0.16 webkit

? ? Not supported 6.0 webkit
requestID return value ?   ? 11.0 (11.0) moz ? ? ?

Notas para Gecko

Antes que Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() se podía llamar sin parámetros. Esta opción ya no está soportada ya que no es probable que se convierta en parte del estándar.

Notas para Chrome

En estos momentos, la llamada correcta en Chrome para cancelar la petición es window.webkitCancelAnimationFrame(). La antigua versión, window.webkitCancelRequestAnimationFrame(), está obsoleta se sigue soportando por ahora.

Especificaciones

Timing control for script-based animations: requestAnimationFrameWD

Véase también

Etiquetas y colaboradores del documento

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