window.requestAnimationFrame()

Este artigo necessita de uma revisão editorial. Como posso ajudar.


O método window.requestAnimationFrame() fala para o navegador que deseja-se realizer 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 nevagdor 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
WHATWG HTML Living Standard
The definition of 'requestAnimationFrame' in that specification.
Living Standard Sem mudanças, substitui a anterior
Timing control for script-based animations
The definition of 'requestAnimationFrame' in that specification.
Candidate Recommendation Definição inicial

Compatibilidade de navegadores

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 10 webkit
24 [3]
4.0 moz [1][4]
23 [2]
10.0 (Yes) -o
15.0
6.0 webkit
6.1
Valor de retorno 23 11.0 (11.0) 10.0 15.0 6.1
Funcionalidade Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Suporte básico

4.3 webkit
4.4

4.3 webkit
4.4

11.0 (11.0) moz
23

10.0 15.0

6.1 webkit
7.1

18 webkit25 [3]
Retorna valor de requestID 4.4 4.4 11.0 (11.0) moz 10.0 15.0 6.1 webkit
7.1
25

[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

Etiquetas do documento e colaboradores

 Colaboradores desta página: calaca
 Última atualização por: calaca,