[JS] requestAnimationFrame

requestAnimationFrame 함수란?

웹 애니메이션을 처리하는 데 사용되는 JavaScript의 메서드로, 브라우저에 애니메이션 수행을 요청하고 다음 리페인트가 발생하기 직전에 지정된 콜백 함수를 호출하여 이를 통해 브라우저가 최적화된 애니메이션을 실행할 수 있도록 해준다.

예전에는 타이머함수인 setInterval(), setTimeout() 을 사용하여 무한 반복으로 애니메이션을 만들었다면,
requestAnimationFrame() 는 타이머함수가 가진 단점들을 보완해서 나온 함수라고 볼 수 있다.

---

타이머 함수의 단점?

프레임을 무조건 맞춰준다는 보장이 없기때문에 브라우저가 지연될 시 프레임이 어긋나 애니메이션이 버벅이게 되는 문제가 있다고 한다.🤔

이를 대신하여 프레임 시작에 맞춰 실행될 수 있게 보장되는 requestAnimationFrame 함수가 나온 것이다.👏

requestAnimationFrame 함수의 장점?

🟢 성능 최적화

브라우저가 다음 리페인트를 진행하기 전에 호출되므로, 애니메이션을 브라우저의 리페인트 주기에 맞춰 최적화된 방식으로 처리할 수 있다. 이를 통해 부드러운 애니메이션을 제공할 수 있고, 불필요한 리소스 소모를 방지할 수 있다.

🟢 자원 절약

애니메이션이 화면에 표시되는 동안에만 호출되기때문에 화면에 보이지 않는 경우에는 자원을 소비하지 않으므로, 전력 소비를 줄이고 배터리 수명을 연장할 수 있다.

🟢 타이밍 제어

자체적으로 호출 주기를 관리하므로, 애니메이션의 타이밍을 브라우저가 제어하게 된다. 이는 일반적으로 고해상도 디스플레이나 다양한 장치에서 일관된 애니메이션 효과를 얻을 수 있도록 돕는다.

요약: 웹 애니메이션을 최적화하고 브라우저의 리페인트 주기에 맞춰 처리하여 성능을 향상시킨다.

requestAnimationFrame 함수 사용법

const animation = () => {
  // 스크립트
  
  requestAnimationFrame(animation) 
  // 함수 내부에서 다시 호출하여 반복
}
requestAnimationFrame(animation);


/* 취소 함수 */
cancelAnimationFrame(animation);

---

참고🙏: 1분코딩 & Inpa님