Ernest & Celestine

얼마전 Amazon Prime에서 우연히 본 올 최고 애니메이션 Ernest & Celestine의 제작 과정을 담은 비디오다.  배경은 수채화로 그리고, Flash로 애니메이션을 만들었다고 한다. 이 정도로 2D의 아름다움을 잘 표현한 매니메이션도 드물 듯. 자세한 것은 제작과정을 소개한 블로그를 참고.

참고

• http://www.animationschooldaily.com/?p=3145
• http://ernestandcelestine.tumblr.com/

 

CSS Animations, requestAnimationFrame, setInterval

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

• 관련 글: Animating with javascript: from setInterval to requestAnimationFrame

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

• 관련글
  • http://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
  • http://davidwalsh.name/translate3d

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

• 관련글: http://davidwalsh.name/css-js-animation

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

• 관련글: https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript

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