RequestAnimationFrame

브라우저 프레임

초당 프레임(fps)는 1초에 몇 개의 프레임이 보여지는 가를 나타낸다.

스크롤을 하거나 애니메이션 같은 것들이 화면에서 부드럽게 보이기 위해서는 60fps가 필요하다.

1000ms/60 = 16.666ms 간격으로 프레임을 생성해야 된다.

즉, 사용자에게 부드러운 애니메이션 느낌을 보여주기 위해서는 16.6ms마다 코드를 호출해야 하는 것이다.

16.6ms보다 더 오래 걸리게 되면, 화면에서 끊김 현상이 발생한다.

---

RequestAnimationFrame

최적화를 해서 애니메이션을 효율적으로 실행해주는 함수이다.

requestAnimationFrame은 브라우저가 애니메이션을 업데이트할 준비가 되면 호출된다.

실제 화면이 갱신되는 주기에 맞춰서 콜백을 호출해주기 때문에 화면 끊김 현상을 방지한다.

 

requestAnimationFrame은 브라우저가 다음 프레임을 렌더링하기 직전에 콜백 함수를 호출한다.

브라우저의 화면 갱신 주기에 맞춰 실행되므로 부드러운 애니메이션을 만들 수 있다.

 

60fps로 동작하는 디스플레이의 경우 16.6ms 간격으로 콜백이 호출된다.

 

requestAnimationFrame 실행 -> 다음 프레임이 그려지기 전에 함수를 실행하도록 예약 -> 16.6ms 간격으로 렌더링

---

Animation Frames

브라우저의 큐에는 Callback Queue 뿐만 아니라 Animation Frames도 존재한다.

requestAnimationFrame은 Animation Frames라는 별도의 큐에서 처리된다.

 

requestAnimationFrame은 별도의 큐인 Animation Frames에 적재된다.

또한 Microtask Queue > Animation Frames > Task Queue 순서로 실행되기 때문에 실행이 뒤쳐지는 현상을 방지할 수 있다.

하지만 브라우저의 CPU/GPU 사용량에 따라 실행이 밀릴 수도 있다.

---

RequestAnimationFrame 장점

1. 정확도와 성능 최적화

브라우저의 다음 리페인트 주기에 맞춰서 콜백을 실행하기 때문에, 최적의 타이밍에 렌더링이 된다.

또한 최적화된 시간에 애니메이션을 실행해서 CPU/GPU 자원을 절약할 수 있다.

 

2. 백그라운드 동작 중지

페이지가 비활성화 된 상태라면 페이지 화면 그리기 작업도 중단된다.

따라서 CPU 리소스나 배터리 수명을 절약할 수 있다.

 

3. 디스플레이 주사율에 맞게 호출

화면에 부드럽게 보이기 위해서는 60fps가 필요하다고 위에서 언급했다.

하지만 디스플레이의 주사율에 맞게 자동으로 적절한 fps 설정하고, 디스플레이에 최적화된 애니메이션을 제공한다.

따라서 다양한 디바이스에서 일관된 부드러운 애니메이션을 보여준다.

---

사용방법 및 간단예제

콜백 함수 내부에서 재귀호출을 하는 방식으로 사용하면 된다.

포차코가 위로 이동하고, 클릭을 하면 멈추는 간단한 예제를 만들어 보았다.

 

간단한 로직은 아래와 같다.

  const pochacco = document.querySelector(".pochacco");
  let yPos = 0;
  let rafId;

  const render = () => {
    pochacco.style.transform = `translateY(${-yPos}px)`;
    yPos += 10;
    rafId = requestAnimationFrame(render);
  };

  render();

  window.addEventListener("click", () => {
    cancelAnimationFrame(rafId);
  });

 

 

그냥 귀여워서 넣어보고 싶었습니다..😽