[자바스크립트] requestAnimationFrame

 

 

일반적으로 JS에서 애니메이션을 만들 때는 'setInterval' 함수를 사용하여 일정한 간격으로 코드를 실행시키는 방식을 사용할 수 있다. 그러나 'setInterval'은 정확한 타이밍으로 실행되지 않을 수 있고, 브라우저의 성능에 따라 애니메이션이 부드럽지 않게 나올 수 있다.

 

이에 반해 'requestAnimationFrame' 은 웹브라우저에서 제공하는 메서드로, 웹 애니메이션을 부드럽게 처리하기 위해 사용된다. 이 메서드를 사용하면 애니메이션을 구성하는 함수가 브라우저의 리플로우(reflow)와 리페인트(repaint) 주기에 맞춰 호출된다. 브라우저는 모니터의 주사율에 맞게 애니메이션을 업데이트하므로, 성능에 따라 알맞은 주기로 실행된다.

 

 

 

 

기본적인 'requestAnimationFrame'의 작동방식은 아래와 같다.

1. 'requestAnimationFrame'을 호출하여 애니메이션을 시작한다. 이때 인자로 애니메이션을 처리하는 함수를 전달한다. 이 함수는 애니메이션 프레임마다 호출된다.
2. 브라우저는 화면을 갱신하기 전에 다음 애니메이션 프레임을 그리기 위해 대기한다.
3. 화면을 갱신하기 직전에, 브라우저는 'requestAnimationFrame'으로 전달한 함수를 호출한다.
4. 애니메이션 함수 내부에서는 화면에 보여져야 할 요소들의 상태를 업데이트하고, 애니메이션 효과를 적용한다.
5. 애니메이션 함수가 실행을 마치면, 브라우저는 해당 애니메이션 프레임을 그리고 화면을 갱신한다.
6. 위의 과정이 계속 반복되며, 'requestAnimationFrame'으로 전달한 함수가 프레임마다 호출된다. 이를 통해 애니메이션은 부드럽게 움직이게 된다.

 

 

 

'requestAnimationFrame'을 사용하면 애니메이션의 주기가 브라우저의 주사율에 맞추어지므로, 최적의 성능과 부드러운 애니메이션 효과를 얻을 수 있다. 또한, 'requestAnimationFrame'은 브라우저가 백그라운드 탭에서 실행 중인 애니메이션을 자동으로 일시 중지하고, 탭이 다시 활성화되면 애니메이션을 다시 시작하는 등의 최적화를 수행하기도 한다.

 

간단하게 말하자면, 'requestAnimationFrame'은 웹 애니메이션을 쉽게 제어하고 부드럽게 실행할 수 있도록 도와주는 브라우저의 기능이다.

 

 

 

 

 

---

 

 

 

 

 

'requestAnimationFrame' 주의할 점

 

1. 무한 루프 조심하기 : 'requestAnimationFrame'은 애니메이션 프레임을 그리기 위해 계속해서 호출된다. 따라서 잘못 구현하면 무한 루프에 빠질 수 있다.
   애니메이션을 업데이트하는 로직에서 종료 조건을 명확히 설정하고, 필요에 따라 애니메이션을 중지하거나 일시 중지할 수 있는 방법을 구현해야 한다.
   
   
2. 백그라운드 탭에서 실행 중인 애니메이션 제한 : 브라우저는 백그라운드 탭에서 실행 중인 애니메이션을 제한할 수 있다. 이는 백그라운드 탭이 시스템 자원을 절약하기 위해 애니메이션 프레임을 제한적으로 실행시키는 것을 의미한다.
   따라서 'requestAnimationFrame'을 사용할 때, 현재 탭이 활성화되어 있는지 확인하는 것이 좋다. 탭이 비활성화되어 있으면 애니메이션 업데이트를 일시 중지하거나, 보다 가벼운 방식으로 애니메이션을 처리할 수 있다.
   
   
3. 애니메이션 성능 최적화 : 'requestAnimationFrame'을 사용하더라도, 부적절한 애니메이션 업데이트 로직은 성능 문제를 초래할 수 있다. 예를 들어, 매 프레임마다 DOM 요소의 스타일을 변경하는 경우 성능 저하가 발생할 수 있다.
   애니메이션 업데이트는 GPU를 활용하여 수행되므로, CSS 트랜지션과 애니메이션 속성을 활용하는 증 최적화된 방식으로 업데이트 하는 것이 좋다.
   
   
4. 다른 애니메이션 기술과 함께 사용하기 : 'requestAnimationFrame'은 애니메이션 프레임을 그리는 데에 최적화되어 있지만, 모든 애니메이션에 적합한 것은 아니다.
   특히 CSS애니메이션, 트랜지션, canvas, webGL등 다른 애니메이션 기술과 사용할 수 도 있다. 애니메이션 요구사항과 상황에 맞게 최적의 기술을 선택하는 것이 중요하다.
   
   
5. 크로스 브라우저 호환성 : 'requestAnimationFrame'은 대부분의 최신 브라우저에서 지원되지만, 모든 브라우저에서 동일하게 작동하지는 않을 수 있다. 따라서 크로스 브라우저 호환성을 고려하여 코드를 작성하고, 필요한 경우 'requestAnimationFrame'을 폴리필로 대체해야 할 수도 있다.