Casino

It's time to learn how to play poker for free on Casino770 if you feel like winning enough to take part in the biggest live tournaments in the world!

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)

Blogroll

 

September 2010
M T W T F S S
« Aug    
 12345
6789101112
13141516171819
20212223242526
27282930  

Pages

Categories

Recent Posts

Tags

poker poker site pokerstar wcoop

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.

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.

en.2cards.com