Today’s demo is short, but it also includes a long screencast that describes how it’s put together. The demo’s author, Alistair MacDonald (@F1LT3R), is one of the maintainers of Processing.js and the Burst engine, which is the basis for today’s demo and tutorial.
If you haven’t clicked through to his site, I strongly suggest that you do so. You’ll notice that the site is animated and slick-looking with sections that slide in and out and lots of graphics. It’s the kind of thing that you normally would see written in flash, but there’s no flash on the main page. It’s all CSS, canvas and animation in the DOM. Pretty amazing.
On to the demo. There have been some demos done with animating SVG but there’s one thing that stands out about this one that makes it different. Instead of loading SVG natively into the DOM, which is how SVG was originally designed, the Burst engine loads the SVG, parses it and creates some JS objects around it which you can then use to render it to a canvas. From there you can quickly animate it with the Burst engine and mix it with other content on a canvas.
I also strongly suggest that you watch the tutorial on how this demo was put together. He shows how easy it is to take inkscape, the Burst engine and other simple JS to take a simple drawing and animate it. It’s worth the length of the video.
Very, very slick.
Awesome, I am loving this 35 day series
Just finished up an animated SVG US Map. I’m really excited that SVG is finally getting decent implementation in at least a few browsers. I ended up using the dojo gfx toolkit because, well I use dojo and it has a library for this sort of thing but the idea is the same.
Should be noted that inkscape is pretty darn buggy, btw. Also that while simple animations in SVG run pretty nicely the more complex the lower the “Framerate” and sadly it’s nowhere near as clean as flash.
What exactly do you mean by “clean”?
@Breton sorry that was pretty ambiguous. Not a reference to the code or API. I’m referring to playback. Smoothness of animation. We’re on our way but just try to implement a particle system in svg or canvas… it’ll make ya cry.
Why do you not using smil for this stuff?
OK, Firefox has no native smil support but fakesmile does the job.
Here’s a Character in Burst: http://hyper-metrix.com/burst/development/doc/demos/js/GitHub%27s-Octocat.htm
Here’s it running on iPhone: http://hyper-metrix.com/burst/development/doc/demos/js/Octocat-iPhone/Octocat-iPhone.htm
@Vance Dubberly: I found the new “real” version of Inkscape to run very, very well. I usually work with the pre-releases.