window.requestAnimationFrame()


O método window.requestAnimationFrame() fala para o navegador que deseja-se realizar uma animação e pede que o navegador chame uma função específica para atualizar um quadro de animação antes da próxima repaint (repintura). O método tem como argumento uma callback que deve ser invocado antes da repaint.
Nota: A rotina callback deve chamar requestAnimationFrame() se quiser animar outro quadro na próxima repaint.

Deve-se chamar esse método sempre que estiver pronto para atualizar a animação na tela. Isso irá requisitar que a função de animação seja chamada antes que o navegador realize a próxima repaint. O número de callbacks é normalmente 60 por segundo, mas geralmente acompanha a taxa de atualização do display na maioria dos navegadores, como recomenda a W3C. A taxa de callbacks é reduzida quando executados em aba de fundo ou em <iframe> escondidos para melhorar performance e vida de bateria.

Um único argumento é passado para o método callback, um DOMHighResTimeStamp, que indica o tempo atual no qual callbacks enfileiradas por requestAnimationFrame começam a disparar. Múltiplos callbacks em um único quadro, assim, cada um recebe o mesmo carimbo de data/hora . Esse carimbo de data/hora é um número decimal, em milisegundos, mas com precisão mínima de 1ms (1000 µs).

Sintaxe

window.requestAnimationFrame(callback);

Parâmetros

callback
Parâmetro especificando uma função a ser chamada quando chegar a hora de atualizar a animação para a próxima repaint. O callback possui um único argumento, um DOMHighResTimeStamp, que indica a hora atual (a hora retornada de Performance.now() ) para quando requestAnimationFrame começar a disparar callbacks.

Valor de retorno

Um valor inteiro long, a id da requisição, que identifica unicamente a entrada na lista de callbacks. Esse é um valor não-zero, mas não deve-se assumir mais nada sobre esse valor. Esse valor pode ser passado para window.cancelAnimationFrame() para cancelar a requisição da atualização do callback.

Exemplo

var start = null;
var element = document.getElementById("ElementoQueVcQuerAnimar");
element.style.position = 'absolute';

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

window.requestAnimationFrame(step);

Especificação

Especificação Status Comentário
HTML Living Standard
The definition of 'requestAnimationFrame' in that specification.
Padrão em tempo real Sem mudanças, substitui a anterior
Timing control for script-based animations
The definition of 'requestAnimationFrame' in that specification.
Obsoleto Definição inicial

Compatibilidade de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
requestAnimationFrameChrome Full support 24
Full support 24
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 23
Notes
Full support 23
Notes
Notes Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performance.now().
No support 11 — 42
Prefixed Notes
Prefixed Implemented with the vendor prefix: moz
Notes Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().
No support 4 — 11
Prefixed Notes
Prefixed Implemented with the vendor prefix: moz
Notes Could be called with no input parameters.
IE Full support 10Opera Full support 15
Full support 15
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari Full support 6.1
Full support 6.1
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android Full support 25
Full support 25
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 23
Full support 23
No support 14 — 42
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support 14
Full support 14
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari iOS Full support 7
Full support 7
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android Full support 1.5
Full support 1.5
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Return valueChrome Full support 23Edge Full support 12Firefox Full support 11IE Full support 10Opera Full support 15Safari Full support 6.1WebView Android Full support YesChrome Android Full support 25Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

[1] Anteriro ao Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() podia ser chamado sem parâmetros de entrada. Isso não é mais suportado, como provavelmente não será parte do padrão

[2] O parâmetro do callback é DOMTimeStamp ao invés de DOMHighResTimeStamp se a versão prefixada do método foi utilizada DOMTimeStamp possui apenas precisão de milisegundo, mas DOMHighResTimeStamp possui precisão mínima de microsegundos.  Portanto, o tempo zero é diferente: DOMHighResTimeStamp possui o mesmo tempo zero que performance.now(), mas DOMTimeStamp possui o mesmo tempo zero que Date.now().

[3] A chamada correta no Chrome para cancelar a requisição é currently window.cancelAnimationFrame(). Versões anteriores, window.webkitCancelAnimationFrame() e window.webkitCancelRequestAnimationFrame(), foram descontinuados mas possuem suporte por enquanto.

[4] Suporte para a versão prefixada foi removida no Firefox 42.

Veja também