The Ashes

Technology, Science and other news
June 16, 2009

Animating SVG with Canvas and Burst

Posted by : admin
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:

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:

Tags :

No Comments

(required)
(will not be published) (required)
(opitional)

cciash.com EN ES IT DE PT CZ FR RU
June 2018
M T W T F S S
« Sep    
 123
45678910
11121314151617
18192021222324
252627282930  

Pages

Categories

Resources

There are many online poker site where you can play but at poker.hk you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!