The Ashes
Technology, Science and other news
June 16, 2009
Animating SVG with Canvas and Burst
Filed under : General
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
Tags :
No Comments