Animation Loop

create-animation-frames.ts

export type FrameTicker = (deltaTime: number) => void;

/**
 * Creates smooth animation frames.
 *
 * @param frameTicker This callback will be called on each frame.\
 * The `deltaTime` argument specifies the time elapsed between the last frame
 * and the one preceding it (in milliseconds).
 * @returns Returns animation frames controller.
 */
const createAnimationFrames = (frameTicker: FrameTicker) => {
  let prevTimestamp: number = -Infinity;
  let rafReference: number = -Infinity;

  const mainTicker: FrameRequestCallback = timestamp => {
    const deltaTime = timestamp - prevTimestamp;
    prevTimestamp = timestamp;

    frameTicker(deltaTime);

    rafReference = window.requestAnimationFrame(mainTicker);
  };

  const start = () => {
    prevTimestamp = performance.now();
    rafReference = window.requestAnimationFrame(mainTicker);
  };

  const stop = () => {
    window.cancelAnimationFrame(rafReference);
  };

  return { start, stop };
};

export default createAnimationFrames;