JavaScript Character Animation

Here is a quick example of character animation using JavaScript and HTML5 technology. There is no Flash running on this page. This kind of task would normally be handed to Flash, but the browser is perfectly capable of handling these things natively. In this example I am using a JavaScript animation library called "The Burst Engine" to import the layers from an <svg> file and render them to the <canvas>.

I created the SVG file using Inkscape, using the trace-bitmap function to cut out the shapes from the original Octocat graphic. I made sure I named each shape in Inkscape and exported it to a Plain SVG.

Once the graphic was cut, all I had to do was drop burst-engine.js into an HTML document, and write a little script to handle the animation. Burst is syntactically very similar to jQuery, using chained function calls to traverse timeline objects and properties.

The Script

Here is the entire Burst-Engine script to load the graphics and run this animation: the script creates and starts 2 separate time-lines, which contain and animate different parts of the Octocat.svg file.

(function(){

  function myBurstScript(Burst){

    Burst.defaults.ease="easeInOutSine";

    Burst.timeline("legs",1,200,5,true)
    .shape("octocat","Octocat.svg","svg",-110,-75,0.5,0)
      .cut("Head;EarL;Skin;EarR;EyeL;EyeR;MouthNose;WiskersL;WiskersR;")

      .group("Tenticles")
        .track("centerX").key(0,330).track("centerY").key(0,240)
        .track("rot").key(0,-5).key(100,5).key(200,-5)
        .track("transform").key(0, [1,0,.03,1,0,0]).key(100,[1,0,-.03,1,0,0]).key(200,[1,0,.03,1,0,0])
        .track("scl").key(0,1.1)
        .track("top").key(0,-15)

      .group("Tail")
        .track("left").key(0,5).key(100,-18).key(200,5)
        .track("centerX").key(0,330).track("centerY").key(0,240)
        .track("rot").key(0,-5).key(100,5).key(180,-5)
        .track("transform").key(0, [1,0,.03,1,0,0]).key(100,[1,0,-.03,1,0,0]).key(200,[1,0,.03,1,0,0])
        .track("scl").key(0,1.05)
        .track("top").key(0,-20).key(100,-22).key(200,-20)
        .track("centerX").key(0,290).track("centerY").key(0,240)
        .track("rot").key(0,0).key(100,-10).key(180,0)

      .group("Drop").track("centerX").key(0,190).track("centerY").key(0,280)
        .track("left").key(105,-20).key(180,6)
        .track("top").key(0,0).key(100,-15,"easeInQuad").key(190,110)
        .track("opac").key(0,0).key(105,0).key(110,1).key(190,1).key(200,0)
    ;
    
    Burst.timeline("head", 1, 100, 5, true)
    .shape("octocat","Octocat.svg","svg",-110,-75,0.5,0)
      .cut("Tenticles;Tail;Drop;Pool")

      .group("Head")
        .track("transform").key(0,[1,0,0,1,0,0]).key(50,[1,0,0,.95,0,0]).key(100,[1,0,0,1,0,0])

      .group("EarL").track("centerX").key(0,215).track("centerY").key(0,61)
        .track("top").key(0,0).key(50,20).key(100,0) 
        .track("scl").key(0,1).key(50,1.5).key(100,1)

      .group("EarR").track("centerX").key(0,450).track("centerY").key(0,61)
        .track("top").key(0,0).key(50,20).key(100,0)
        .track("scl").key(0,1).key(50,1.5).key(100,1)

      .group("Skin").track("centerX").key(0,330).track("centerY").key(0,170)
        .track("top").key(0,0).key(50,-20).key(100,0)
        .track("scl").key(0,1).key(50,1.02).key(100,1)

      .group("EyeL").track("centerX").key(0,290).track("centerY").key(0,180)
        .track("top").key(0,0).key(50,-20).key(100,0)
        .track("scl").key(0,1).key(50,1.02).key(100,1)

      .group("EyeR").track("centerX").key(0,390).track("centerY").key(0,180)
        .track("top").key(0,0).key(50,-20).key(100,0)
        .track("scl").key(0,1).key(50,1.02).key(100,1)

      .group("MouthNose").track("centerX").key(0,330).track("centerY").key(0,210)
        .track("top").key(0,0).key(50,-20).key(100,0)
        .track("scl").key(0,1).key(50,1.05).key(100,1)

      .group("WiskersL").track("centerX").key(0,200).track("centerY").key(0,210)
        .track("scl").key(0,1).key(50,1.1).key(100,1)
        .track("top").key(0,0).key(50,-10).key(100,0)

      .group("WiskersR").track("centerX").key(0,450).track("centerY").key(0,210)
        .track("scl").key(0,1).key(50,1.1).key(100,1)
        .track("top").key(0,0).key(50,-10).key(100,0)
    ;
    
    Burst.start("head;legs");  
  };
  
  newBurst('BurstCanvas', myBurstScript);
  
})();