[JavaScript] 자바스크립트 requestAnimationFrame 사용하기

182_자바스크립트 requestAnimationFrame 사용하기

[적용]

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

---

[문법]

메소드	의미	반환
requestAnimationsFrame(함수)	시간 경과에 따른실행 함수 등록	숫자

---

[내용]

requestAnimationFrame()은 화면에 각 프레임이 표시되기 전에 함수를 불러내는 명령으로,

이 메소드를 사용하면 시간 경과에 따른 지속적인 변화를 줄 수 있다.

일반적인 디스플레이는 초당 60프레임이 표시되며, 이는 한 프레임단 약 16밀리초의 시간이다.

만약 setTimeout()과 setInterval()을 사용해 16밀리초 이하의 시간을 설정한다면,

화면에는 표시되지 않으므로 불필요한 처리가 발생한다.

그러나 requestAnimationsFrame()을 사용하면 웹에서 불필요한 처리 없이 프레임 표시에 맞춰 애니메이션 효과를 줄 수 있다.

 

requestAnimationFrame()은 한 번만 호출되나, 애니메이션을 생성하기 위해서는 함수의 연속 호출이 필요하다.

함수 내에서 자신을 다시 불러내도록 하여 tick 함수를 지속적으로 실행할 수 있다.

 

JavaScript

tick();
function tick() {
  requestAnimationFrame(tick);
  // 애니메이션 작업 처리 내용
}

 

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

 

함수의 실행을 멈추고 싶을 때는 다음과 같은 방법을 사용한다.

• requestAnimationFrame()의 호출을 멈춤
• cancelAnimationFrame()을 사용해 멈춤

 

JavaScript

tick();
function tick() {
  if (조건문) {
    requestAnimationFrame(tick);
  }
  
  // 애니메이션 작업 처리 내용
}

 

requestAnimationFrame()은 숫자 값의requestID를 반환한다.

임의의 시점에 requestID를 cancelAnimationFrame()의 인수로 전달하면 해당 함수의 실행을 취소한다.

 

JavaScript

tick();
let requestID;
function tick() {
  requestID = requestAnimationFrame(tick);
  
  // 애니메이션 작업 처리 내용
}

calcelAnimationFrame(requestID);

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김