javascript) Canvas에 애니메이션을 위한 requestAnimationFrame

requestAnimationFrame

requestAnimationFrame(callback) 는 Canvas에서 애니메이션을 위한 함수로

일반적으로 초당 60회의 콜백 함수를 실행하지만

현재의 대다수의 브라우저에서는 디스플레이의 주사율을 파악해 그만큼 콜백을 반복 실행한다.

애니메이션이 지속적으로 이루어지기 위해서는

callback 함수 내에서 다시 requestAnimationFrame(callback) 호출해야 한다.

 

cancelAnimationFrame

이러한 애니메이션을 중지하기 위해서는

 window.cancelAnimationFrame(requestID) 를 호출하여 중지시킬 수 있다.

let raf;
let start;
let count = 0;

function draw() {
	console.log("draw");
    count += 1;
    let end = new Date();
    if (end - start >= 1000) { //1초 경과마다 콜백 실행횟수 출력
      console.log(count);
      start = new Date();
      count = 0;
    }
}

function update() {
	draw()
	raf = window.requestAnimationFrame(update); //다음 프레임을 위한 호출
}

function startUpdate() {
 	start = new Date();
	raf = window.requestAnimationFrame(update); // 애니메이션 시작
}

function stopUpdate() {
	window.cancelAnimationFrame(raf); //애니메이션 중지
}

 

예를 들어,

주사율이 180fps인 게이밍 모니터를 연결한 컴퓨터에서 위의 코드를 실행시

초당 180번씩 콜백 함수인 update()를 실행한다. 

또한 120fps의 가변 주사율을  지원하는 모바일 기기 갤럭시 s21에서 실행시

화면을 스크롤할 때는 120fps, 정적인 상태에서는 60fps를 유지했다.

제대로 된 방법은 아니지만 이를 통해 기기의 주사율을 알아낼 수도 있다.

---

성능

예를 들어 초당 60프레임의 속도로 화면을 렌더링하기 위해서는

1/60초. 약 16.7ms마다 렌더링이 필요하다.

렌더링에 이 시간보다 긴 시간이 소요될 경우 프레임 드랍이 발생한다.

때문에 제대로 된 성능을 위한 최적화가 매우 중요하다.

Animation performance and frame rate - Web Performance | MDN