RequestAnimationFrame()을 이용해 JS Animation을 최적화하기

 

RequestAnimationFrame() 이란?

• 자바스크립트 내장함수
• 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출한다.
• 기본적으로 1초에 60회지만 대부분 디스플레이 주사율과 일치하게 된다.
• 모던 브라우저에서는 백그라운드 탭이다 Hidden iframe에서 실행이 중단된다.
• 단일 프레임에서의 다중 콜백은 각각 동일한 타임스탬프를 참조한다.
• 최대 1ms(1/1000s)로 제한되며 1초에 60번 동작한다.
• callback 함수를 파라미터로 받고 고유한 id(정수 값)을 리턴한다.

window.requestAnimationFrame(callback);

왜 써야할까?

우리는 기존에 어떻게 애니메이션을 구현했을까?

• css Animation ?
• transform ?
• translate ?

시간에 따른 애니메이션이라면?

• setTimeOut
• setInterval

을 사용했다.

문제가 발생했다!

브라우저와 콜백 함수 호출 타이밍이 어긋난다.

프레임 드랍에 의해 애니메이션이 버벅거리게 됐다.

보통 브라우저는 60FPS를 지원하는데, 한 프레임당 16ms정도이다.
이 때, 브라우저의 프레임 생성 간격(16ms)에 어긋나게 콜백함수가 실행된다면 해당 프레임에 애니메이션을 업데이트 하지 못하게 된다.

 

으악 내눈

뭐!? 애니메이션이 버벅거린다고!?!

requestAnimationFrame()

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출한다.
기본적으로 1초에 60회지만 대부분 디스플레이 주사율과 일치하게 된다.

맨 앞에 있던 내용이다.
이제 얼마나 좋은 함수인 지 알 수 있다.

1. 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트한다.

setTiemOut, setInterval 을 사용하여 나타나는 지연 및 블로킹 현상이 일어나지 않는다
-> 아주 부드러운 애니메이션을 구현할 수 있다!

예제

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);

https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame#%EC%98%88%EC%8B%9C

2초(2000ms)동안 이동하는 애니메이션이다.

중간에 애니메이션을 취소하고 싶다면, cancelAnimationFrame(requestID)를 호출하여 스케줄된 애니메이션 프레임 요청을 취소할 수 있다.

requestID: requestAnimationFrame() 의 반환값

 

이 외에도...

모던 브라우저에서는 백그라운드 탭이다 Hidden iframe에서 실행이 중단된다.
단일 프레임에서의 다중 콜백은 각각 동일한 타임스탬프를 참조한다.
최대 1ms(1/1000s)로 제한되며 1초에 60번 동작

라는 특징으로 성능 최적화를 지원해준다!