JavaScript Academy · Aula

Animação com requestAnimationFrame

Crie animações suaves no canvas.

Animação com requestAnimationFrame é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Por que usar requestAnimationFrame?

requestAnimationFrame(callback) agenda sua função de desenho para ser executada antes da próxima atualização da tela — normalmente 60 vezes por segundo. Ele pausa em abas em segundo plano, economizando CPU e bateria, ao contrário de setInterval.

function frame() {
  // draw one frame
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

O laço básico

Um laço de animação limpa o canvas, atualiza o estado, desenha e depois agenda a si mesmo novamente.

let x = 0;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  x += 2;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Limpando cada quadro

Sem clearRect, o quadro anterior permanece desenhado e você obtém rastros. Limpe toda a área de pixels no início de cada quadro para redesenhar a imagem de forma limpa.

ctx.clearRect(0, 0, canvas.width, canvas.height);

O argumento de marca temporal

A função de retorno recebe uma marca temporal de alta resolução (milissegundos). Use-a para calcular o tempo decorrido entre os quadros.

let last = 0;
function loop(now) {
  const dt = now - last;
  last = now;
  // dt = ms since previous frame
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Movimento independente da taxa de quadros

Multiplique a velocidade pelo intervalo de tempo para que o movimento mantenha a mesma velocidade, independentemente da taxa de quadros.

let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
  const dt = now - (loop.last || now);
  loop.last = now;
  x += speed * dt;
  requestAnimationFrame(loop);
}

Fazendo uma bola quicar

Inverta a velocidade quando o objeto atingir uma borda para fazê-lo quicar.

let x = 50, vx = 3;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  if (x < 0 || x > canvas.width) vx = -vx;
  ctx.beginPath();
  ctx.arc(x, 75, 15, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(loop);
}
loop();

Parando o laço

requestAnimationFrame retorna um identificador. Passe-o para cancelAnimationFrame para interromper a animação.

let id;
function loop() {
  id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);

Pausando e retomando

Acompanhe um sinalizador running. Para retomar, solicite um novo quadro; para pausar, simplesmente pare de solicitar quadros (ou cancele o que está pendente).

let running = true;
function loop() {
  if (!running) return;
  // draw...
  requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }

Animando vários objetos

Armazene os objetos em um vetor e atualize cada um dentro do laço.

const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of balls) {
    b.x += b.vx;
    ctx.fillRect(b.x, 60, 20, 20);
  }
  requestAnimationFrame(loop);
}
loop();

Suavização para um movimento fluido

Interpole em direção a um alvo usando suavização para obter uma desaceleração natural.

let x = 0;
const target = 200;
function loop() {
  x += (target - x) * 0.1; // ease out
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();

Dicas de desempenho

Evite alocar objetos dentro do laço, agrupe chamadas de desenho e redesenhe apenas o que mudou quando possível. Mantenha pequeno o trabalho por quadro para ficar abaixo do orçamento de ~16 ms para 60 quadros por segundo.

Verificação rápida

Teste seus conhecimentos sobre animação.

Recapitulação: animação

Você criou laços de animação com requestAnimationFrame, limpou cada quadro com clearRect, usou a marca temporal para tornar o movimento independente da taxa de quadros, animou balls que quicam e vários objetos, aplicou suavização e aprendeu a parar ou pausar com cancelAnimationFrame.

Perguntas Frequentes

A aula “Animação com requestAnimationFrame” é grátis?

Sim — o texto completo de “Animação com requestAnimationFrame” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Animação com requestAnimationFrame”?

Crie animações suaves no canvas. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Animação com requestAnimationFrame”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy