Animação com requestAnimationFrame

requestAnimationFrame (rAF) agenda uma chamada de retorno antes da próxima repintura do navegador, sincronizando a animação com a taxa de atualização da tela (normalmente 60fps). Ao contrário de setInterval, rAF é pausado quando a aba fica oculta, economizando CPU e bateria.

Um laço rAF: defina uma função animate que desenha o quadro atual e depois chama requestAnimationFrame(animate) para agendar o próximo. O navegador chama animate antes de cada repintura, criando uma animação contínua na taxa de quadros da tela.

rAF passa uma marca de tempo de alta resolução do DOM (milissegundos desde o carregamento da página) para a chamada de retorno. Use-a para calcular um movimento independente da taxa de quadros: delta = timestamp - lastTimestamp. Multiplique a velocidade por delta para mover a mesma distância por segundo, independentemente da taxa de quadros.

Calcule o tempo transcorrido desde o último quadro e ajuste o movimento de acordo. Um objeto que se move a 100px/s percorre 100 * (delta / 1000) pixels por quadro. Isso garante uma física consistente em telas de 30fps e 144fps.

rAF retorna um identificador. Cancele-o com cancelAnimationFrame(handle). Armazene o identificador em uma variável, verifique um sinalizador de execução dentro do laço ou cancele-o durante a limpeza do componente. Sempre cancele os laços quando o elemento for removido do DOM.

A cada quadro: (1) use clearRect na tela inteira, (2) atualize as variáveis de estado (posição, ângulo, tempo), (3) desenhe todos os objetos nas novas posições, (4) chame requestAnimationFrame para o próximo quadro. Nunca ignore clearRect — os quadros antigos se acumulam como um rastro.

Use transições e animações CSS para animações simples baseadas em propriedades (efeitos ao passar o cursor, entrada deslizante de janelas modais). Use rAF para animações complexas e interativas — laços de jogos, simulações físicas e renderização na tela — quando precisar de controle detalhado sobre cada quadro.

Para cenas complexas, desenhe primeiro em uma tela fora da tela e depois use drawImage para desenhá-la na tela visível em uma única operação. Isso evita cintilação, pois nunca exibe um quadro parcialmente desenhado — a tela visível é atualizada atomicamente a cada quadro.

Limite a uma taxa de quadros menor (por exemplo, 30fps): verifique se transcorreu tempo suficiente desde o último desenho antes de renderizar. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Agende rAF mesmo assim para manter a capacidade de resposta.

O painel de desempenho do Chrome DevTools registra as chamadas de retorno de rAF no gráfico de chamas do JS. Procure chamadas longas que ultrapassem 16 ms — elas causam perda de quadros. Use o medidor de FPS (Renderização → medidor de FPS) para observar a taxa de quadros em tempo real durante a interação.

Para animações declarativas mais simples, sem temporização manual: element.animate(keyframes, options). WAAPI gerencia funções de temporização, modos de preenchimento e iterações, transferindo o cálculo dos quadros para o navegador. Use rAF para a lógica de renderização personalizada que WAAPI não consegue expressar.

Por que a velocidade da animação deve ser multiplicada pelo tempo delta em um laço requestAnimationFrame?

requestAnimationFrame sincroniza a animação em JavaScript com a taxa de atualização da tela e pausa em abas ocultas. O parâmetro de marcação de tempo permite um movimento independente da taxa de quadros por meio do ajuste pelo tempo delta. O padrão de laço de animação da tela (limpar, atualizar, desenhar, agendar), combinado com cancelAnimationFrame para a limpeza, forma a base de animações web suaves e eficientes.