RequestAnimationFrame

requestAnimationFrame()이란?

window.requestAnimationFrame() 메서드는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 지정된 함수를 호출하도록 요청한다. 이 메서드는 리페인트 이전에 호출할 인수로 콜백을 받는다. 즉, 브라우저에서 다음 렌더링이 발생하기 전에 requestAnimationFrame API의 콜백함수가 수행되는 것을 보장해준다.(화면이 업데이트되기 전에 등록한 콜백함수를 수행해줘)

예시

이 예제에서, 요소는 2초(2000 밀리초) 동안 애니메이션이 적용된다. 요소는 0.1px/ms 속도로 오른쪽으로 이동해서, 그것의 상대적 위치(CSS 픽셀)는 0.1 elapsed로 애니메이션의 시작 이후 경과된 시간(밀리초) 함수에서 계산될 수 있다. **요소의 최종 위치는 처음 위치에서 오른쪽으로 200px(0.1 2000) 이동한 위치이다.**

const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // Math.min()은 여기서 요소가 정확히 200px에 멈추는지 확인하기 위해 사용됩니다
    const count = Math.min(0.1 * elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // 2초 이후에 애니메이션 종료
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);

출처 : https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame