35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
/**
|
|
* requestAnimationFrame을 사용한 애니메이션 루프 훅
|
|
* @param callback 매 프레임마다 호출될 콜백 (deltaTime을 인자로 받음)
|
|
* @param isPlaying 애니메이션 재생 여부
|
|
*/
|
|
export const useAnimationFrame = (
|
|
callback: (deltaTime: number) => void,
|
|
isPlaying: boolean = true
|
|
) => {
|
|
const requestRef = useRef<number | undefined>(undefined);
|
|
const previousTimeRef = useRef<number | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
if (!isPlaying) return;
|
|
|
|
const animate = (time: number) => {
|
|
if (previousTimeRef.current !== undefined) {
|
|
const deltaTime = (time - previousTimeRef.current) / 1000; // 밀리초를 초로 변환
|
|
callback(deltaTime);
|
|
}
|
|
previousTimeRef.current = time;
|
|
requestRef.current = requestAnimationFrame(animate);
|
|
};
|
|
|
|
requestRef.current = requestAnimationFrame(animate);
|
|
|
|
return () => {
|
|
if (requestRef.current) {
|
|
cancelAnimationFrame(requestRef.current);
|
|
}
|
|
};
|
|
}, [callback, isPlaying]);
|
|
}; |