Skype Co-founders Invest In European Pet Community Network »
« Toodledo Is In Troubledo

Animating SVG with Canvas and Burst

Written by on June 11th, 2009 in Uncategorized.

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

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:

PLAIN TEXT
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:

Source: Ajaxian » Front Page
Original Article: http://feedproxy.google.com/~r/ajaxian/~3/X0icRKMYlQk/svgburst

Comments are closed.


Site Navigation

Pages

Recently

Archives