Thursday, June 11th, 2009
Animating SVG with Canvas and Burst
Category: Examples
Christopher Blizzard and his team are doing great write-ups on hacks.mozilla.org as they celebrate 35 days of Open Web goodness.
They just posted on the work of Alistair MacDonald who used his Burst engine to demonstrate taking SVG and having Burst load it and convert it all to JavaScript objects that are rendered inside of a canvas.
To get a feel for the code, view source:
JAVASCRIPT:
-
-
Burst.defaults.debug=false;
-
-
Burst.defaults.ease="easeOutQuad";
-
Burst.timeline("chassis", 0, 100, 1, true)
-
.shape("car", "car.svg", "svg", 0, 0, 1, 0)
-
.cut("wheel1;wheel2")
-
.group("chassis")
-
.track("top").key(0,0).key(50,-20).key(70,0)
-
;
-
-
Burst.defaults.ease="linear";
-
Burst.timeline("wheels", 0, 100, 1, true)
-
.shape("car", "car.svg", "svg", 0, 0, 1, 0)
-
.cut("chassis")
-
.group("wheel1").track("centerX").key(0,230).track("centerY").key(0,350)
-
.track("rot").key(0,0).key(100,-360)
-
.group("wheel2").track("centerX").key(0,430).track("centerY").key(0,350)
-
.track("rot").key(0,0).key(100,-360)
-
;
-
-
Burst.timeline("carObject", 0, 300, 3, false)
-
.track("scl").key(0,.5)
-
.track("left").key(0,400).key(300,-195)
-
.inherit("wheels")
-
.inherit("chassis")
-
;
-
-
-
Burst.timeline("boom", 0, 10, 1, true)
-
.shape("boom", "boom.svg", "svg", 0, 0, 1, 0)
-
;
-
-
Burst.start("carObject", function(){
-
Burst.timeline("chassis").paused=true;
-
Burst.timeline("wheels").paused=true;
-
Burst.start("boom");
-
});
-
and then watch the tutorial that shows how you can take Inkscape and quickly get animating.
Also check out the other items:
- stylish text with text-shadow
- add some ambiance to your videos
- geolocation in Firefox 3.5
- content aware image resizing
- Pushing pixels with Canvas
Related Content:
4.4 rating from 17 votes
I’m not sure… you can use JS directly on SVG, so why would you need to use Canvas as well? It can be done in SVG+JS. Isn’t it bad enough, that IE needs plugin for SVG, we also need users to install Canvas plugin? God…
@paziek: Why not just include the canvas support in the SVG plugin?
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.
@paziek actually the technique most commonly used is to abstract the commands detect IE and substitute the SVG lib with a VML one… this is usually all handled by your chosen library.
I checked out the Burst demo and also the cakejs. Both do some pretty cool stuff but currently suffer from the same ailment: busy-wait-itis. Even when that Burst demo finishes, it pegs the CPU at 100%. Incidentally, while the car in the demo is moving, the CPU utilization is less. It appears both are rendering to Canvas in a tight, busy-wait style loop. Reminds me of the annoying flash ads that would consume 100% of the CPU doing either nothing or minimal animation. Some time in the near future FlashBlock will have to be updated to detect Burst and cakejs. Won’t someone think of the poor CPUs! But seriously, how much energy is wasted putting CPU’s into a busy-wait with Flash and now this technology?
SVG plugin might help me, I saw a article somewhere, you’d better google it, trying some footscript could works i think.