requestAnimationFrame는 뭘까?

웹 애플리케이션을 개발할 때, 부드러운 애니메이션을 구현하기 위해 다양한 기술을 사용합니다.

그 중 하나가 바로 requestAnimationFrame입니다.
이 함수는 브라우저가 다음 리페인트를 수행하기 전에 특정 애니메이션 함수를 호출하도록 예약할 수 있게 해줍니다.

requestAnimationFrame은 웹 API로, 브라우저의 리페인트 주기에 맞춰 애니메이션 함수를 실행합니다.

이를 통해 개발자는 부드럽고 효율적인 애니메이션을 구현할 수 있습니다.

예를 들어, 요소의 위치를 변경하거나 크기를 조절하는 애니메이션을 만들 때 이 함수를 사용하면 화면 주사율에 최적화된 애니메이션을 구현할 수 있습니다.

 

requestAnimationFrame 작동 원리

이 함수는 브라우저의 렌더링 주기와 밀접하게 연관되어 있습니다.

일반적으로 브라우저는 초당 60번의 화면 갱신을 목표로 하지만, requestAnimationFrame은 실제 화면 갱신 주기에 맞춰 실행됩니다.

브라우저는 다음 리페인트 직전에 requestAnimationFrame으로 등록된 콜백 함수를 호출합니다.

이를 통해 개발자는 화면 갱신 주기에 맞춰 정확하게 애니메이션을 제어할 수 있으며, 불필요한 연산을 줄일 수 있습니다.

 

사용 사례

requestAnimationFrame은 여러 가지 상황에서 유용하게 활용될 수 있습니다:

1. 부드러운 애니메이션: 요소의 위치, 크기, 투명도 등을 변경하는 애니메이션 구현.
2. 게임 개발: 게임 루프를 구현할 때 프레임 단위로 게임 상태를 업데이트.
3. 스크롤 효과: 스크롤에 반응하는 시각적 효과를 구현할 때.

이러한 방식으로 requestAnimationFrame은 성능 최적화와 부드러운 사용자 경험 제공에 큰 도움을 줄 수 있으며, 특히 복잡한 애니메이션이나 인터랙티브한 웹 애플리케이션에서 효과적일 수 있습니다.

 

예시

파란색 동그라미는 requestAnimationFrame를 적용한 경우, 빨간색 동그라미는 setInterval을 사용했습니다.

function OptimizedAnimation() {
  const [position, setPosition] = useState(0);
  const animationRef = useRef<number | null>(null);
  const lastTimeRef = useRef(performance.now());

  useEffect(() => {
    const animate = (time: number) => {
      if (time - lastTimeRef.current > 15) {
        setPosition((prevPosition) => (prevPosition + 1) % window.innerWidth);
        lastTimeRef.current = time;
      }
      animationRef.current = window.requestAnimationFrame(animate);
    };

    const startAnimation = () => {
      if (animationRef.current === null) {
        animationRef.current = window.requestAnimationFrame(animate);
      }
    };

    window.requestIdleCallback(startAnimation);

    return () => {
      if (animationRef.current !== null) {
        window.cancelAnimationFrame(animationRef.current);
      }
    };
  }, []);

  return (
    <div style={{ padding: "20px" }}>
      <div
        style={{
          width: "50px",
          height: "50px",
          backgroundColor: "blue",
          borderRadius: "50%",
          position: "absolute",
          left: `${position}px`,
        }}
      />
    </div>
  );
}

function NonOptimizedAnimation() {
  const [position, setPosition] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setPosition((prevPosition) => (prevPosition + 1) % window.innerWidth);
    }, 15);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ padding: "20px" }}>
      <div
        style={{
          width: "50px",
          height: "50px",
          backgroundColor: "red",
          borderRadius: "50%",
          position: "absolute",
          left: `${position}px`,
        }}
      />
    </div>
  );
}