createAnimationFrame.ts

createAnimationFrame.ts

/*
 * Create an animation frame with a specified callback with
 * a target frame rate.
 */
const createAnimationFrame = (
  callback: (timeDelta: number) => boolean,
  targetFrameRate?: number,
  timePrevious?: number,
  timeCurrent?: number,
): null | number => {
  if (typeof timePrevious === 'number' && typeof timeCurrent === 'number') {
    const timeDelta = timeCurrent - timePrevious;
    if (
      typeof targetFrameRate !== 'number' ||
      timeDelta >= 1000 / targetFrameRate
    ) {
      const success = callback(timeDelta);
      if (!success) {
        return null;
      }
      timePrevious = timeCurrent;
    }
  } else {
    timePrevious = timeCurrent;
  }

  return window.requestAnimationFrame(timeCurrent =>
    this.createAnimationFrame(
      callback,
      targetFrameRate,
      timePrevious,
      timeCurrent,
    ),
  );
};

// Usage:
createAnimationFrame(
  timeDelta => {
    // Do stuff...
    
    return true;
  },
  120
);