Function useAnimationFrame

Custom React hook that integrates with vevet's AnimationFrame class.

This hook creates an animation frame instance, allowing for customizable animation properties and callbacks for play, pause, and frame events. It handles the lifecycle of the animation instance, ensuring proper cleanup on component unmount.

Example

const MyComponent = () => {
  const { play, pause } = useAnimationFrame({
    onPlay: () => console.log('Animation started'),
    onPause: () => console.log('Animation paused'),
    onFrame: ({ fpsMultiplier }) => {
      console.log('Frame updated, FPS Multiplier:', fpsMultiplier);
    },
  });

  return (
    <div>
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
    </div>
  );
};