Maîtriser les trames d'animation avec JavaScript

Introduction

Dans ce laboratoire, nous allons explorer l'utilisation de la récursivité et de la méthode Window.requestAnimationFrame() pour créer une fonction qui peut enregistrer les trames d'animation et invoquer un rappel fourni à chaque trame. Nous allons également apprendre à contrôler l'enregistrement manuellement à l'aide des méthodes start et stop de l'objet renvoyé. Ce laboratoire nous aidera à comprendre comment travailler avec les trames d'animation en JavaScript et à créer des animations plus efficaces et contrôlées.

Guide to Record Animation Frames

Pour enregistrer les trames d'animation, suivez les étapes suivantes :

Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
Utilisez la récursivité pour invoquer le rappel fourni à chaque trame d'animation.
Si running est true, continuez d'invoquer Window.requestAnimationFrame(), qui invoque le rappel fourni.
Pour permettre un contrôle manuel de l'enregistrement, renvoyez un objet avec deux méthodes start et stop.
Omettez le second argument, autoStart, pour appeler implicitement start lorsque la fonction est invoquée.

Utilisez le code suivant pour enregistrer les trames d'animation :

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

Exemple d'utilisation du code :

const cb = () => console.log("Animation frame fired");
const recorder = recordAnimationFrames(cb);
// affiche 'Animation frame fired' à chaque trame d'animation
recorder.stop(); // arrête d'afficher
recorder.start(); // recommence
const recorder2 = recordAnimationFrames(cb, false);
// `start` doit être appelé explicitement pour commencer à enregistrer les trames

Enregistrer les trames d'animation

Introduction

Guide to Record Animation Frames

Summary