본 데모는 Firefox 3.5 Beta 4 이상을 설치해서 보시길 권합니다.

오늘 보여드릴 데모는 매우 짧은 것이긴 하지만 어떻게 개발했는지 스크린 캐스트로 설명해 드릴려고 합니다. 이 데모는 Alistair MacDonald (@F1LT3R)가 만들었고 Processing.js의 개발자이자 이 데모의 기반이 된 Burst engine을 만드는 사람입니다.

아직 여러분이 데모 사이트를 보지 않으셨다면 먼저 보시길 권해 드립니다. 이 웹 사이트는 애니메이션과 매끈하게 보이는 슬라이드와 그래픽 영역을 가지고 있습니다. 아마 여러분들은 플래시로 만든게 아닐까 하는 생각이 드실 겁니다. 하지만 플래시는 사용하지 않았고 오직 CSS와 Canvas 그리고 DOM만을 이용하였습니다.

데모로 돌아와서 이 글에는 몇 가지 SVG 애니메이션 기능을 제공하고 있습니다. 지금까지 이렇게 다르게 만들 수 있는 방법이 별로 없었습니다만 SVG를 DOM으로 네이티브하게 받아 들이는 대신 Burst 엔진을 이용하여 SVG를 읽고 처리해서 JS 객체를 만들어 캔버스에 뿌리는 방식을 이용 합니다. 이렇게 함으로서 좀 더 빠르게 애니메이션을 만들고 Canvas에 그려 낼 수 있습니다.

또한 이 데모를 어떻게 만들었는지 튜토리얼을 보시길 권합니다. inkscape를 이용하여 Burst 엔진과 다른 간단한 JS 코드를 통해 그리기 및 애니메이션이 가능합니다.

View Video (.ogv) | View Video (.mp4)