Conceitos básicos de animação
Vamos explorar os conceitos básicos de animação no HTML Canvas, uma ferramenta poderosa para criar movimentos fluidos e dinâmicos em suas criações visuais.
Iniciando a Animação:
Para criar uma animação no Canvas, você precisará usar a função requestAnimationFrame, que executa uma função específica repetidamente, criando a ilusão de movimento.
Veja um exemplo:
function animar() {
// Código de animação aqui
requestAnimationFrame(animar);
}
// Iniciar a animação
animar();
A Propriedade clearRect:
Antes de desenhar cada novo quadro, é importante limpar o quadro anterior para evitar sobreposição.
Utilize o método clearRect para limpar uma área específica do Canvas:
function animar() {
contexto.clearRect(0, 0, canvas.width, canvas.height);
// Código de animação aqui
requestAnimationFrame(animar);
}
Movendo Objetos:
Para animar um objeto, você pode alterar suas propriedades, como posição, cor ou tamanho, em cada quadro. Aqui está um exemplo simples de movimento horizontal:
let x = 50; // posição inicial
function animar() {
contexto.clearRect(0, 0, canvas.width, canvas.height);
// Desenhar o objeto na nova posição
contexto.fillRect(x, 50, 30, 30);
// Atualizar a posição para o próximo quadro
x += 2;
requestAnimationFrame(animar);
}
Controlando a Velocidade:
Para garantir que a animação tenha uma velocidade constante, você pode usar a função setTimeout ou setInterval. Aqui está um exemplo com setTimeout:
function animar() {
contexto.clearRect(0, 0, canvas.width, canvas.height);
// Desenhar o objeto na nova posição
contexto.fillRect(x, 50, 30, 30);
// Atualizar a posição para o próximo quadro
x += 2;
setTimeout(animar, 16); // 16 milissegundos para um FPS próximo a 60
}
// Iniciar a animação
animar();
Estes são os conceitos básicos que formam a fundação da animação no HTML Canvas.
Nos próximos tópicos, exploraremos aspectos mais avançados, como a importância dos quadros (frames), animação de objetos e otimização de desempenho.
Continue praticando para aprimorar suas habilidades de animação no Canvas.
