[책] 자바스크립트 코드 레시피 278 - 169일차

requestAnimationFrame 사용하기

• WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때
• 요소에 3D 효과를 주고 싶을 때

구문

requestAnimationFrame(함수) 시간 경과에 따른 실행 함수 등록

설명

requestAnimationFrame()은 화면에 각 프레임이 표시되기 전에 함수를 불러내는 명령으로, 이 메소드를 사용하면 시간 경과에 따른 지속적인 변화를 줄 수 있습니다. 일반적인 디스플레이는 초당 60프레임이 표시되며, 이는 한 프레임당 약 16밀리초의 시간입니다. 만약 setTimeout()과 setInterval()을 사용해 16밀리초 이하의 시간을 설정한다면, 화면에는 표시되지 않으므로 불필요한 처리가 발생합니다. 그러나 requestAnimationFrame()을 사용하면 웹에서 불필요한 처리 없이 프레임 표시에 맞춰 애니메이션 효과를 줄 수 있습니다.

requestAnimationFrame()은 한번만 호출되나, 애니메이션을 생성하기 위해서는 함수의 연속 호출이 필요합니다. 함수 내에서 자신을 다시 불러내도록 하여 tick 함수를 지속적으로 실행할 수 있습니다.

실습

let scope = 0;
tick();
function tick() {
  requestAnimationFrame(tick);
  scope = scope + 1;
  console.log(scope);
  if (scope === 100) {
    console.log('끝');
    cancelAnimationFrame(scope);
  }
}

requestAnimationFrame()은 주로 WebGL과 HTML 캔버스에서 사용합니다.

함수의 실행을 멈추고 싶을 때?

cancelAnimationFrame() 을 사용해 멈춤

실습 1

tick();
function tick() {
  if (true) {
    requestAnimationFrame(tick);
  }
  console.log('실행');
}

실습 2

tick();
// let tickScope = 0;
function tick() {
  requestID = requestAnimationFrame(tick);
  console.log(requestID);
}
// cancelAnimationFrame(tickScope);

구글링하여 이해하기

구글링하여 requestAnimationFrame cancelAnimationFrame 정의를 알아봅시다.