Temporização de animações — introdução a loops baseados em tempo
Crie um pequeno loop de animação, use atualizações baseadas no tempo (delta), simule requestAnimationFrame e adicione uma suavização simples
Temporização de animações — introdução a loops baseados em tempo é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 3. 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 3 aulas no total.
Por que animação baseada em tempo?
Objetivo: Conduzir movimentos suaves com atualizações baseadas em tempo.
- Simular requestAnimationFrame
- Medir o tempo delta
- Mover-se a unidades por segundo
- Adicionar uma pequena suavização
rAF simulado
Não há DOM aqui, então simulamos requestAnimationFrame usando setTimeout de aproximadamente 16 ms.
// requestFrame: simulate ~60 FPS with setTimeout
function requestFrame(fn) {
// ~16ms between frames for ~60fps
return setTimeout(function () { fn(Date.now()); }, 16);
}
function cancelFrame(id) {
clearTimeout(id);
}
// Tiny demo: schedule one frame
requestFrame(function (ts) {
console.log("frame at", ts);
});
Noções básicas do tempo delta
Calcule o tempo delta a cada quadro: (now − last) / 1000. Isso ajusta o movimento ao tempo real.
// Time-based loop: compute delta time in seconds
let running = true;
let last = Date.now();
function loop() {
if (!running) { return; }
const now = Date.now();
const dt = (now - last) / 1000; // seconds
last = now;
// Print a tiny delta preview
console.log("dt", dt.toFixed(3), "s");
requestFrame(loop);
}
// Start the loop and stop after a few frames
loop();
setTimeout(function () {
running = false;
console.log("stop");
}, 60);
Unidades por segundo
Use speed × dt para atualizar a posição, de modo que o movimento permaneça consistente em diferentes taxas de quadros.
// Move with a speed in units/second
let x = 0; // position
const speed = 50; // units per second
let lastT = Date.now();
let frames = 0;
function moveLoop() {
const now = Date.now();
const dt = (now - lastT) / 1000;
lastT = now;
// Distance = speed * time
x = x + speed * dt;
frames = frames + 1;
console.log("x", Math.round(x));
if (frames < 5) {
requestFrame(moveLoop);
} else {
console.log("final x", Math.round(x));
}
}
moveLoop();
Demonstração de suavização
A suavização define o formato da curva. Aqui, easeOutQuad começa rapidamente e desacelera perto do fim.
// Ease from 0 to 1 over duration using easeOutQuad
function easeOutQuad(t) {
// t in [0,1]
return 1 - (1 - t) * (1 - t);
}
async function tween(durationMs) {
let start = Date.now();
let id = null;
function step() {
const now = Date.now();
const t = Math.min(1, (now - start) / durationMs);
const eased = easeOutQuad(t);
console.log("eased", eased.toFixed(2));
if (t < 1) {
id = requestFrame(step);
} else {
cancelFrame(id);
console.log("done");
}
}
step();
}
tween(60);
Exemplo de passo fixo
Um passo fixo pode estabilizar a lógica; o acumulador recupera o atraso quando um quadro demora.
// Fixed-step taste: step a physics tick and catch up using an accumulator
let acc = 0; // accumulated time
const step = 1 / 30; // 30 FPS fixed step in seconds
let lastTime = Date.now();
let value = 0;
let fixedFrames = 0;
function fixedLoop() {
const now = Date.now();
const dt = (now - lastTime) / 1000;
lastTime = now;
acc = acc + dt;
// Run zero or more fixed steps to catch up
while (acc >= step) {
// Update logic at a fixed rate
value = value + 1; // pretend physics
acc = acc - step;
}
console.log("value", value);
fixedFrames = fixedFrames + 1;
if (fixedFrames < 5) {
requestFrame(fixedLoop);
} else {
console.log("fixed stop");
}
}
fixedLoop();
Questionário sobre delta e passo fixo
Verificação rápida: Por que usar o tempo delta?
Recapitulação
Recapitulação: Você simulou rAF com setTimeout, mediu o tempo delta, moveu-se a unidades por segundo, adicionou uma suavização de saída e experimentou um passo fixo com um acumulador.
Perguntas Frequentes
A aula “Temporização de animações — introdução a loops baseados em tempo” é grátis?
Sim — o texto completo de “Temporização de animações — introdução a loops baseados em tempo” é 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 3 aulas no total.
O que vou aprender em “Temporização de animações — introdução a loops baseados em tempo”?
Crie um pequeno loop de animação, use atualizações baseadas no tempo (delta), simule requestAnimationFrame e adicione uma suavização simples 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 3 de 3.
Quanto tempo leva a aula “Temporização de animações — introdução a loops baseados em tempo”?
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
- setTimeout, setInterval e desvio dos temporizadores
- Debounce versus throttle — implementados manualmente
- Temporização de animações — introdução a loops baseados em tempo