CSS Animations, requestAnimationFrame, setInterval

웹에서 에니메이션 효과를 만드는 방법에는  여러가지가 있다. 그 중 많이 쓰이는 방법이 Javascript timer를 이용하는 것이다. setInterval 함수를 이용하면 특정 시간 간격으로 함수를 호출할 수 있고, 여기에 element의 css 값을 변경하면 다양한 움직임 효과를 보여줄 수 있다. 하지만, JS timer는 성능상에 문제가 있고, 부드럽지 못하다. 그 이유는 화면이 갱신되는 주기와 움직임 효과 주기가 다르기 때문에 어떤 프레임은 화면에 나타나지 못하고 CPU 만 낭비될 수 있다. 그래서 나온 것이 requestAnimationFrame이다. 이를 이용하면 화면 갱신되는 주기와 animation이 갱신되는 주기를 맞출 수 있고, 이를 통해 좀 더 부드러운 움직임 효과를 보여줄 수 있다.

또 다른 방법은 CSS Animations을 이용할 수 있는데, JS없이 움직을 구현할 수 있다는 것이 큰 장점이다. 브라우저 엔지 내에 있는 timer로 동작하고 당연히 화면 업데이트 주기와 동기화가 이루어진다. 그럼에도 불구하고 CSS Property에 따라 상당한 CPU를 사용하기도 한다. 이때는 일부러 transform: translateZ(0);를 추가해서 GPU 가속을 받도록 하는 방법이 있다. 하지만, 에니메이션이라는 기능 자체가 어떤 동작으로 끊임없이 실행하는 것이기 때문에 빠른 켬퓨터에서도 10%이하로 CPU사용을 줄이기는 어렵다.

CSS Animations이 항상 좋은 것은 아니다. 특정 경우, 움직임을 JS로 제어하거나 마우스나 터치 입력에 반응해야 하는 경우, JS 방식을 추천하기도 한다.

JS Timer보다는 CSS Animations이 성능이 월등히 좋다.  그것은 별도의 thread에서 animations과 compositing을 책임지기 때문이다. 플랫폼에 따라 다를 수 있겠지만, Safari 브라우저의 경우, Core Animation이 별도의 thread로 동작한다. Chrome Browser의 경우도 compositor thread에서  CSS Animations을 처리한다.

웹페이지에서 움직을 만들기 위한 여러가지 방법을 소개해보았다. 어떤 것이든지 본인이 쓰기 편한 방식을 선택하면 되겠지만, setInterval 함수를 사용하는 JS timer 방식은 피하는 것이 좋겠다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s