주요 내용
어떤 DOM 애니메이션을 사용해야 할까요?
웹 페이지의 일부에 애니메이션을 적용하는 세 가지 기술인 :
window.setInterval/setTimeout, window.requestAnimationFrame, CSS animations/transitions를 살펴보았습니다.어떤 기술을 이용할 것인지를 고려할 때 다음의 질문을 고려해야 합니다.
- 그 기술이 실제로 내가 수행하고 싶어하는 것을 수행할 수 있는가?
- 이 기술의 성능이 어떤가? (이 기술로 브라우저/컴퓨터가 느려지지 않는가?)
- 타이밍이 얼마나 정확해야 하는가?
- 이 기술이 내가 원하는 모든 브라우저에서 호환되는가?
웹 페이지를 만들 때 성능에 매우 관심을 가지므로 가장 중요한 기준으로 성능을 고려하는 경향이 있습니다. 그러나 브라우저 성능은 새로운 브라우저가 나올 때 변하고 모바일 브라우저는 데스크톱 브라우저와는 매우 다르게 동작하므로 오늘날 가장 잘 동작하는 기술이 나중에 가장 잘 동작하는 기술이 아닐 수도 있습니다. 현재 CSS animations/transitions의 성능이 가장 좋지만 이후에는
requestAnimationFrame가 될 수 있고 그 이후에는 setInterval이 될수도 있습니다.그러나 CSS가 모든 것을 수행할 수는 없습니다. 예를 들어
<canvas> 태그에 픽셀과 모양을 그리기 위해 fillRect()와 같은 함수를 호출해야 하는데 CSS는 이용할 수 없습니다. 대신 정기적으로 이러한 함수를 호출하는 데에 requestAnimationFrame 또는 setInterval을 이용할 필요가 있습니다. 이것은 실제로 ProcessingJS 환경의 칸아카데미 웹 페이지에서 하는 일입니다. ProcessingJS는 <canvas> 태그에 작성하는 JS 라이브러리이고, 코드에 draw() 함수를 정의한다면 ProcessingJS는 setInterval을 이용하여 frameRate에 기반해 draw() 함수를 반복해서 호출합니다.때때로 주기적으로 JavaScript 함수를 호출하는 것이 페이지에서 무엇인가를 움직이고 싶어서는 아닙니다. 서버가 실시간 입력값을 갱신할 때 트위터(Twitter)가 그렇듯이 여러분은 갱신하려고 서버를 조회할 수 있습니다. 이 경우 단순히
setInterval을 이용할 수 있으며 몇 분마다 해당 함수를 호출하면 되므로 타이밍이 정확하지 않은 것은 중요하지 않습니다. 칸아카데미의 도움 요청 페이지에서 하는 일이 바로 이것입니다. 도움 요청 페이지는 2분마다 새로운 도움 요청을 계속해서 확인합니다.물론 브라우저 호환성을 염두에 둘 필요가 있습니다. IE9에서 동작해야 하는 코드를 작성하는 경우
requestAnimationFrame이나 CSS animations을 사용할 수 없습니다. 모든 브라우저에서 동작하는 기술을 혼합하여 사용하거나 Velocity.js처럼 그 일을 대신 해주는 라이브러리를 찾아야 합니다.이러한 모든 기술을 배울 수 있는 곳이 많습니다. 좀 더 배우고 싶다면 다음의 링크를 참조하면 됩니다.
닥터 후 팬을 위한 보너스: 제가 CSS3 애니메이션 기능 중에 대한 가장 좋아하는 예제 중 하나인 움직이는 타디스입니다.