requestAnimationFrame에 대해 알아보기

 

requsetAnimationFrame이란?

 

requestAnimationFrame()은 브라우저에서 애니메이션을 최적화하여 실행할 수 있도록 제공하는 JavaScript API이다.
주로 CSS 애니메이션이나 setTimeout(), setInterval()을 사용하는 것 보다 성능이 뛰어나기 때문에 웹 애니메이션을 구현할 때 많이 사용된다.

 

requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신속도(리페인팅)에 맞추는 것이다.

이 API를 사용하면 브라우저의 리프레시 속도(초당 60프레임, 60FPS)를 고려하는데 이 갱신 주기를 맞추어 콜백을 실행해 부드럽고 효율적인 애니메이션을 만들 수 있다.

 

이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록 보장하여 부드러운 사용자 경험을 제공하고, 불필요한 연산을 줄일 수 있다.

 

사용 예시는 아래와 같다.

const animate = () => {
  /* 애니메이션을 위한 동작 */

  if (일정시간이지나면) {
    return;
  }
  
  requestAnimationFrame(animate)
}

requestAnimationFrame(animate)

 

물론 setTimeout()이나 setInterval()과 같은 함수로 애니메이션을 실행할 수 있지만, 브라우저의 화면 갱신주기와 맞지 않는 경우가 발생한다. 이로인해 프레임 드랍및 애니메이션 끊김현상이 발생할 수 있다. 반면, requestAnimationFrame()은 화면 갱신주기에 맞춰 실행되기 때문에 프레임 드랍이나 애니메이션 끊김현상 없이 매끄럽게 보여지고, 성능 측면에서도 좋다.

 

requestAnimation()의 또 다른 장점

이외에도, 디스플레이 주사율에 맞춰서 콜백의 실행주기가 동적으로 조정된다. 60Hz, 120Hz, 144Hz등 디스플레이 주사율에 맞게 최적의 타이밍을 찾아 실행된다.

 

또한 setTimeout(), setInterval()과 달리 비활성화 탭(백그라운드)에서 실행되지 않아 CPU 자원을 절약할 수 있다.

 

cancelAnimationFrame으로 애니메이션 중지

requestAnimation()은 정수형 id값을 반환한다.

animationId에 requsetAnimation()의 반환값을 저장해놓고 cancelAnimation(animationId)로 인자값을 넣어주면 해당 함수는 중지된다.

 

let animationId;

function startAnimation() {
  let position = 0;
  let box = document.getElementById("box");

  function step() {
    position += 5;
    box.style.transform = `translateX(${position}px)`;

    if (position < 500) {
      animationId = requestAnimationFrame(step);
    }
  }

  animationId = requestAnimationFrame(step);
}

function stopAnimation() {
  cancelAnimationFrame(animationId);
}