Registrar Fotogramas de Animación

Introducción

En este laboratorio, exploraremos el uso de la recursividad y el método Window.requestAnimationFrame() para crear una función que pueda registrar los fotogramas de una animación y llamar a una devolución de llamada proporcionada en cada fotograma. También aprenderemos a controlar la grabación manualmente utilizando los métodos start y stop del objeto devuelto. Este laboratorio nos ayudará a entender cómo trabajar con los fotogramas de animación en JavaScript y cómo crear animaciones más eficientes y controladas.

Guía para registrar fotogramas de animación

Para registrar los fotogramas de una animación, siga los pasos siguientes:

1. Abra la Terminal/SSH y escriba node para comenzar a practicar la codificación.
2. Utilice la recursividad para llamar a la devolución de llamada proporcionada en cada fotograma de animación.
3. Si running es true, siga llamando a Window.requestAnimationFrame(), que llama a la devolución de llamada proporcionada.
4. Para permitir el control manual de la grabación, devuelva un objeto con dos métodos start y stop.
5. Omita el segundo argumento, autoStart, para llamar implícitamente a start cuando se invoque la función.

Utilice el siguiente código para registrar los fotogramas de una animación:

const recordAnimationFrames = (callback, autoStart = true) => {
  let running = false,
    raf;
  const stop = () => {
    if (!running) return;
    running = false;
    cancelAnimationFrame(raf);
  };
  const start = () => {
    if (running) return;
    running = true;
    run();
  };
  const run = () => {
    raf = requestAnimationFrame(() => {
      callback();
      if (running) run();
    });
  };
  if (autoStart) start();
  return { start, stop };
};

Uso de ejemplo del código:

const cb = () => console.log("Animation frame fired");
const recorder = recordAnimationFrames(cb);
// muestra 'Animation frame fired' en cada fotograma de animación
recorder.stop(); // detiene la visualización
recorder.start(); // comienza de nuevo
const recorder2 = recordAnimationFrames(cb, false);
// se debe llamar explícitamente a `start` para comenzar a registrar los fotogramas

Resumen

¡Felicidades! Has completado el laboratorio de Registro de Fotogramas de Animación. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.