[WEB] requestAnimationFrame()

채동기·2022년 11월 28일

requestAnimationFrame web

web

목록 보기

1/2

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.

콜백 주기

콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다.

왜 사용하는가?

브라우저가 애니매이션을 최적화하여 생성할 수 있게 해줍니다.

어떻게?

표시되지 않는 탭에서는 애니매이션을 실행하지 않습니다. 그렇기 때문에 메모리 사용량과 배터리 사용을 최적화 할 수 있습니다.

문제점

화면 주사율에 따른 다른 결과
MDN 문서를 보면

The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.

이라고 나옵니다. 즉, 1초에 60번의 콜백 함수를 호출하지만, 대부분의 웹브라우저에서는 디스플레이의 Hz를 따른다고 합니다.
초당 프레임의 수가 달라지게 되면 초당 호출되는 콜백 함수의 횟수가 달라지고 같은 시간동안의 실행된 requestAnimationFrame의 결과가 달라지게 됩니다.

해결 방법: throttle 사용하기

Throttle이란? 쓰로틀은 연속된 이벤트를 그룹화해서 일정 시간간격동안 한번만 이벤트 처리를 하는 것
이 개념을 사용하여 일정 시간 동안 특정 횟수 만큼의 레더링을 할수있습니다.
!주의 : 설정된 모니터의 주사율은 넘을 수는 없습니다.

사용법

window.requestAnimationFrame(callback);

callback

다음 리페인트를 위한 애니메이션을 업데이트할 때 호출할 함수입니다.
requestAnimationFrame()이 콜백 함수 실행을 시작할 때의 시점을 나타내는 performance.now() 에 의해 반환되는 것과 유사한 DOMHighResTimeStamp (en-US) 단일 인자가 전달됩니다.

반환 값

콜백 리스트의 항목을 정의하는 고유한 요청 id 인 long 정수 값. 0 이 아니라는것 외에는 다른 추측을 할 수가 없는 값입니다.

예시

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);