[Canvas] window.requestAnimationFrame이란

안녕하세요, 개발자 Sean입니다. 

본격적으로 3D관련 기술 공부를 시작했는데 window.requestAnimationFame이란 메서드를 보고 정리해 두면 좋겠다 생각되어 정리해 올려봅니다. 

 

MDN의 정의에 따르면 아래와 같습니다. 

 

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

 

const animate = () => {
  window.requestAnimationFrame(animate);
  ctx.clearRect(0,0,canvasWidth, canvasHeight);
  particle.draw();
}

 

형태가 위처럼 재귀함수의 모양을 띄게 됩니다. 

 

requestAnimationFrame은 다음 리페인트를 위해 애니메이션을 업데이트할 때 콜백함수를 계속해서 호출하게 됩니다. setInterval과 결국 같은 게 아니냐고 생각할 수 있지만 setInterval의 경우 프레임이 미처 리페인트 되지 않았는데 이후의 호출이 지속되면 결국 프레임이 끊기는 현상이 발생할 수 있습니다. 반면에 requestAnitationFrame은 그러한 일을 방지하고 애니메이션을 부드럽게 리페인팅하도록 합니다.