Animating SVG with Canvas and Burst

In: web resources

11 Jun 2009

31335 hacks 180x150 Animating SVG with Canvas and Burst picture web resources

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.

61efe burst 300x225 Animating SVG with Canvas and Burst picture web resources

To get a feel for the code, view source:

JAVASCRIPT:

  1.  
  2.     Burst.defaults.debug=false;
  3.    
  4.     Burst.defaults.ease=“easeOutQuad”;
  5.     Burst.timeline(“chassis”, 0, 100, 1, true)
  6.       .shape(“car”, “car.svg”, “svg”, 0, 0, 1, 0)
  7.         .cut(“wheel1;wheel2″)       
  8.         .group(“chassis”)
  9.           .track(“top”).key(0,0).key(50,-20).key(70,0)       
  10.     ;
  11.    
  12.     Burst.defaults.ease=“linear”;
  13.     Burst.timeline(“wheels”, 0, 100, 1, true)
  14.       .shape(“car”, “car.svg”, “svg”, 0, 0, 1, 0)
  15.         .cut(“chassis”)         
  16.         .group(“wheel1″).track(“centerX”).key(0,230).track(“centerY”).key(0,350)
  17.           .track(“rot”).key(0,0).key(100,-360)
  18.         .group(“wheel2″).track(“centerX”).key(0,430).track(“centerY”).key(0,350)
  19.           .track(“rot”).key(0,0).key(100,-360)
  20.     ;
  21.    
  22.     Burst.timeline(“carObject”, 0, 300, 3, false)     
  23.       .track(“scl”).key(0,.5)
  24.       .track(“left”).key(0,400).key(300,-195)
  25.       .inherit(“wheels”)
  26.       .inherit(“chassis”)
  27.     ;
  28.    
  29.  
  30.     Burst.timeline(“boom”, 0, 10, 1, true)
  31.       .shape(“boom”, “boom.svg”, “svg”, 0, 0, 1, 0)
  32.     ;
  33.    
  34.     Burst.start(“carObject”, function(){
  35.         Burst.timeline(“chassis”).paused=true;
  36.         Burst.timeline(“wheels”).paused=true;
  37.         Burst.start(“boom”);
  38.     });
  39.  

and then watch the tutorial that shows how you can take Inkscape and quickly get animating.

View the Ogg or mp4 versions.

Also check out the other items:

Animating SVG with Canvas and Burst picture web resources Animating SVG with Canvas and Burst picture web resources Animating SVG with Canvas and Burst picture web resources

Comment Form

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.

Categories

Archives

  • Brandi: It's a perfect time of year for rich burgundy and gold, these colours look rich, warm and s [...]
  • ★ʂʈar☆: Go to yahoo.com. click on mail. click on sign up. [...]
  • icewalk17: get need for speed fo sho! [...]
  • warren914: there are inverters that have a power switchover and a battery charger, so you can connect your gene [...]
  • pixarkid: I ran across the same message using the converter. I think it happens when you try to convert a file [...]

Copyright © 2007 - Programming Blog - is proudly powered by WordPress | Log in

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com