HTML / JS Animation – window.requestAnimationFrame()

image_pdfimage_print

Este método informa ao navegador que você deseja executar uma animação e solicita que o navegador chame uma função especificada para atualizar uma animação antes do próximo redesenho da tela.

O método recebe um retorno de chamada como um argumento a ser invocado antes do redesenho da tela.

Assinatura:

window.requestAnimationFrame(callback);

A rotina callback deve chamar requestAnimationFrame() se quiser animar outro quadro na próxima refresh da tela.

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).

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!