Record Animation Frames

Introduction

In this lab, we will explore the use of recursion and the Window.requestAnimationFrame() method to create a function that can record animation frames and invoke a provided callback on each frame. We will also learn how to control the recording manually using the start and stop methods of the returned object. This lab will help us understand how to work with animation frames in JavaScript and how to create more efficient and controlled animations.

Guide to Record Animation Frames

To record animation frames, follow the steps below:

1. Open the Terminal/SSH and type node to start practicing coding.
2. Use recursion to invoke the provided callback on each animation frame.
3. If running is true, continue invoking Window.requestAnimationFrame(), which invokes the provided callback.
4. To allow manual control of the recording, return an object with two methods start and stop.
5. Omit the second argument, autoStart, to implicitly call start when the function is invoked.

Use the following code to record animation frames:

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

Example usage of the code:

const cb = () => console.log("Animation frame fired");
const recorder = recordAnimationFrames(cb);
// logs 'Animation frame fired' on each animation frame
recorder.stop(); // stops logging
recorder.start(); // starts again
const recorder2 = recordAnimationFrames(cb, false);
// `start` needs to be explicitly called to begin recording frames

Summary

Congratulations! You have completed the Record Animation Frames lab. You can practice more labs in LabEx to improve your skills.