Animating SVG with Canvas and Burst

In: web resources

11 Jun 2009

 Powered by Max Banner Ads 

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:

  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:

Comment Form


 Powered by Max Banner Ads 

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.

  • Lance: the last four digits of your phone number [...]
  • Moe J: It's a way to get free apps on your iphone which are otherwise not free. Kind of like stealing [...]
  • Katie: If you don't need benefits then I say stay where you are. If you do need benefits then you mig [...]
  • Greg: Here's two. Bill Jefferson Clinton (aka BJ). Had sex in the oval office with a government clerk [...]
  • Aric: nope thats impossible, you just started using comps or sumthin? [...]

New offer:


 Powered by Max Banner Ads 
Internet MegaMeeting, LLC Microsoft Store LinkShare Referral Program Iolo technologies, LLC Artisteer - Web Design Generator FTPress.com (Pearson Education) Mobile Security: Parental Controls and Monitoring Atom Entertainment (formerly AtomShockwave)
.

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

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

Web Analytics