JavaScript Academy · Lección

Animación con requestAnimationFrame

Cree animaciones fluidas en canvas.

Animación con requestAnimationFrame es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Por qué requestAnimationFrame?

requestAnimationFrame(callback) programa la ejecución de la función de dibujo antes del siguiente repintado de la pantalla, normalmente 60 veces por segundo. Se pausa en las pestañas en segundo plano, lo que ahorra CPU y batería, a diferencia de setInterval.

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

El bucle básico

Un bucle de animación limpia el canvas, actualiza el estado, dibuja y vuelve a programarse.

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

Limpiar cada fotograma

Sin clearRect, el fotograma anterior permanece dibujado y se forman rastros. Limpie todo el búfer al principio de cada fotograma para volver a dibujar la escena desde cero.

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

El argumento de marca de tiempo

La función de devolución de llamada recibe una marca de tiempo de alta resolución (en milisegundos). Utilícela para calcular el tiempo transcurrido entre fotogramas.

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

Movimiento independiente de la velocidad de fotogramas

Multiplique la velocidad por el tiempo delta para que la velocidad del movimiento sea constante, independientemente de la velocidad de fotogramas.

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);
}

Hacer rebotar una pelota

Invierta la velocidad cuando el objeto alcance un borde para hacerlo rebotar.

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();

Detener el bucle

requestAnimationFrame devuelve un id. Páselo a cancelAnimationFrame para detener la animación.

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

Pausar y reanudar

Realice el seguimiento de una bandera que indique si se está ejecutando. Para reanudar, solicite un nuevo fotograma; para pausar, deje de solicitar fotogramas (o cancele el que esté pendiente).

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

Animar varios objetos

Almacene los objetos en un array y actualice cada uno dentro del bucle.

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();

Suavizado para un movimiento fluido

Interpóle hacia un destino aplicando suavizado para lograr una desaceleración 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();

Consejos de rendimiento

Evite crear objetos dentro del bucle, agrupe las llamadas de dibujo y, cuando sea posible, vuelva a dibujar solo lo que haya cambiado. Mantenga reducido el trabajo de cada fotograma para no superar el presupuesto de aproximadamente 16 ms a 60 fps.

Comprobación rápida

Ponga a prueba sus conocimientos sobre animaciones.

Repaso: animación

Ha creado bucles de animación con requestAnimationFrame, ha limpiado cada fotograma con clearRect, ha utilizado la marca de tiempo para independizar la animación de la velocidad de fotogramas, ha animado pelotas que rebotan y varios objetos, ha aplicado suavizado y ha aprendido a detener y pausar animaciones con cancelAnimationFrame.

Preguntas frecuentes

¿La lección «Animación con requestAnimationFrame» es gratis?

Sí — el texto completo de «Animación con requestAnimationFrame» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Animación con requestAnimationFrame»?

Cree animaciones fluidas en canvas. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Animación con requestAnimationFrame»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy