[Javascript] 애니메이션 구현 - requestAnimationFrame

 

 

requestAnimationFrame()

 

 

 

 

자바스크립트로 애니메이션을 구현할 때는 1초에 60프레임을 찍어내면 된다. 

사람은 1초에 60개의 프레임을 볼 수 있기 때문이다.

16.6ms(1000ms/60frame)마다 프레임을 찍어내면 된다.

 

setInterval로도 이를 구현할 수 있지만, setInterval이나 setTimeout은 프레임을 신경쓰지 않고 동작하기 때문에

애니메이션 코드를 실행하는데 16.6ms가 넘게 걸린다면 16.6ms동안 프레임을 찍어내지 못했기 때문에 화면이 끊기는 듯한 현상이 발생할 수 있다.

프레임 시작시간에 맞춰 함수가 시작되는 것이 아니라 중간쯤부터 시작해 프레임 시간을 초과해버린다.

 

 

requestAnimationFrame을 사용하면 프레임 생성 시작시간에 맞춰 애니메이션 코드를 시작할 수 있다.

최적화된 속도로 부드러운 애니메이션을 표현하면서 성능도 확보할 수 있다.

 

 

 

 

 

 

 

 

사용 예시

function update() {
 
  requestAnimationFrame(update);
  }

 

화면에 새로운 애니메이션을 업데이트할 때마다 이 메소드를 호출한다.

 

requestAnimationFrame()은 스스로 반복해서 호출하지 않기 때문에 재귀적으로 함수를 다시 호출해줘야한다.