RequestAnimationFrame code

/*  * Project  :   TSO Road Heros Canvas Animation
    * Author   :   Jay Smith of MMK Media
    * Version  :   1.0
*/
if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {
    return  window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                   window.setTimeout( callback, 1000 / 105, new Date()); };
    } )();
}

//set timeout function to control time the script runs if needed - mostly for testing.
//Set up some vars -------------------------------------------------------------
stageHeight =  window.innerHeight;
stageWidth = window.innerWidth;
//window.requestAnimationFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); };})();
//Load all of the Images from the Sources Array - Preload Trick ----------------
function loadImages(sources, callback) {
      var images = {};
      var loadedImages = 0;
      var numImages = 0;
      // get num of sources
      for(var src in sources) {
        numImages++;
      }
      for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
          if(++loadedImages >= numImages) {
            callback(images);
          }
        };
        images[src].src = sources[src];
      }
}

//Set up the Stage. ------------------------------------------------------------
function draw(images)  {
    var stage = new Kinetic.Stage({
          container: 'container',
          width: stageWidth,
          height: stageHeight
    });

    //Set up the Layers. -----------------------------------------------------------

    var charactersLayerBG = new Kinetic.Layer();
    var introLayer = new Kinetic.Layer();

    var introGroup = new Kinetic.Group();

//----- INTRO CHARACTERS-----------------------------------------------
//Amber green body, behind the jaws.
var AmberGreenBody = new Kinetic.Image({
    x: -340 ,
    y: stageHeight - 360,
    width: 335,
    height: 375,
   fillPatternImage: images.amberGreenBody
});


//have to seperate layers as her arm has to be on a different Z-Index to her body! :(
charactersLayerBG.add(AmberGreenBody);


//Ambder green speech bubble.
var AmberGreenSpeechBubble = new Kinetic.Shape({
    x: 380,
    y:stageHeight - 220,
    fill: 'black',
    opacity: 0.85,
    stroke: 'black',
    strokeWidth: 4,
    offset: {
        x: 0,
        y: 240
    },
    scale: {
        x: 1,
        y: 1
    },
    shadow: {
        color: 'black',
        blur: 0,
        offset: [3, 3],
        opacity: 0.4
   },
    drawFunc: function (canvas) {
        var context = canvas.getContext();
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(300, 20);
        context.lineTo(290, 200);
        context.lineTo(50, 200);
        context.lineTo(-30, 250);
        context.lineTo(15, 200);
        context.lineTo(-10, 195)
        context.closePath();
        canvas.fillStroke(this);
    }
});

var AmberGreenSpeechBubbleText = new Kinetic.Text({
        x: 400,
        y: stageHeight -200,
        text: 'Gadzooks! look at all \n \n that traffic! there must \n \n have been an accident!!',
        width:359,
        height:150,
        fontSize: 26,
        offset: [0, 240],
        fontFamily: 'Bangers',
        padding: 8,
        scale: {x:1, y:1},
        fill: "#ccc"
});

charactersLayerBG.add(AmberGreenSpeechBubble);
charactersLayerBG.add(AmberGreenSpeechBubbleText);


//The Cone body, behind the jaws.
var TheConeBody = new Kinetic.Image({
    x: -340 ,
    y: stageHeight - 400,
    width: 299,
    height: 337,
    fillPatternImage:images.TheConeBody
});

charactersLayerBG.add(TheConeBody);


// Background for Intro Later - Road ----
var roadBG = new Kinetic.Image({
    x:0,
    y: stageHeight / 2 - 580,
    width:stageWidth,
    height:852,
   fillPatternImage: images.introRoadBG

});

var bottomOfRoad = new Kinetic.Image({
    x:0,
    y:stageHeight / 2 + 271,
    width:stageWidth,
    height:101,
    fillPatternImage: images.bottomOfRoad
});

var water = new Kinetic.Image({
    x:0,
    y: stageHeight / 2 + 310,
    width: stageWidth,
    height: 640,
    fillPatternImage: images.water
});



//Add intro objects to the introLayer
introGroup.add(water);
introGroup.add(roadBG);
introGroup.add(bottomOfRoad);
//buildCarsLaneOne(stageWidth, stageHeight);


    introLayer.add(introGroup);

    stage.add(introLayer);
    stage.add(charactersLayerBG);


    var IntroAnimation = new Animation('IntroAnimation', "introTimeline", true, 0 [
                                                              //ObjectKeyFrame(time,posX,posY,rotation,scale,opacity,easing){
                                introGroupTimeline = new ObjectTimeline(introGroup,[
                                                            new ObjectKeyFrame(0,       0,     0, 0, 1, 1, "ease-out"),
                                                            new ObjectKeyFrame(15000,   -stageWidth / 2,   0, 0, 1, 1, "ease-out"),
                                                            new ObjectKeyFrame(15000,   -stageWidth / 2,   0, 0, 1, 1, "ease-out")

                                                        ]),

                                AmberGreenBodyTimeline = new ObjectTimeline(AmberGreenBody,[
                                                            new ObjectKeyFrame(0,     -550,  stageHeight - 360, 0, 1, 1, "ease-out"),
                                                            new ObjectKeyFrame(3000,   90,   stageHeight - 360, 0, 1, 1, "ease-out"),
                                                            new ObjectKeyFrame(3000,   90,   stageHeight - 360, 0, 1, 1, "ease-out")

                                                        ]),

                                AmberGreenSpeechBubbleTimeline = new ObjectTimeline(AmberGreenSpeechBubble, [
                                                                        new ObjectKeyFrame(0,     380,     stageHeight - 220, 0, 0, 1, "ease-out"),
                                                                        new ObjectKeyFrame(2000,  380,     stageHeight - 220, 0, 0, 1, "ease-out"),
                                                                        new ObjectKeyFrame(3000,  380,     stageHeight - 220, 0, 1, 1, "ease-out"),
                                                                        new ObjectKeyFrame(8000,  380,     stageHeight - 220, 0, 1, 1, "ease-out"),
                                                                        new ObjectKeyFrame(9000,  380,     stageHeight - 220, 0, 0, 0, "ease-out"),
                                                                        new ObjectKeyFrame(9000,  380,     stageHeight - 220, 0, 0, 0, "ease-out")

                                ]),

                                AmberGreenSpeechBubbleTextTimeline = new ObjectTimeline(AmberGreenSpeechBubbleText, [
                                                                        new ObjectKeyFrame(0,     400,     stageHeight - 200, 0, 0, 1, "ease-out"),
                                                                        new ObjectKeyFrame(2500,  400,     stageHeight - 200, 0, 0, 1, "ease-out"),
                                                                        new ObjectKeyFrame(3000,  400,     stageHeight - 200, 0, 1, 1, "ease-out"),
                                                                        new ObjectKeyFrame(8000,  400,     stageHeight - 200, 0, 1, 1, "ease-out"),
                                                                        new ObjectKeyFrame(9000,  400,     stageHeight - 200, 0, 0, 0, "ease-out"),
                                                                        new ObjectKeyFrame(9000,  400,     stageHeight - 200, 0, 0, 0, "ease-out")

                                ]),

                                theConeBodyTimeline = new ObjectTimeline(TheConeBody, [
                                                                new ObjectKeyFrame(0,     -340,     stageHeight - 400, 0, 1, 1, "ease-out"),
                                                                new ObjectKeyFrame(6000,     -340,     stageHeight - 400, 0, 1, 1, "ease-out"),
                                                                new ObjectKeyFrame(7500,     390,     stageHeight - 400, 0, 1, 1, "ease-out"),
                                                                new ObjectKeyFrame(8000,     410,     stageHeight - 400, 0, 1, 1, "ease-out")
                                ])
   ]);

  introTimeline = [
                AmberGreenBodyTimeline,
                AmberGreenSpeechBubbleTimeline,
                AmberGreenSpeechBubbleTextTimeline,
                theConeBodyTimeline


   ]



    //Run the animation Function to check if any animatoin objects should be running.
    function Animate(){
        //Array of all possible animations.
        animations = [
                       IntroAnimation
                     ]
        //For each animation object. If its supposed to be running go and do the runAnimation Function.
          $.each(animations,function(){
              if (this.animating === true){
                  runAnimation(this);
              }
          });

    }

    function runAnimation(animation){

        newAnimTime = new Date().getTime();
        animationTime = parseInt(newAnimTime - animation.animationStart);

        var t = animationTime; //Animation Time
        var kf = 0; //Current KeyFrame
        var tl = 0; //Current Timeline Item
        var timeFrames = []; //Array to build Keyframes
        var timeline = animation.timeline; //Timeline to use for Current Animation
            //for each of the timeline itesm tun the SetObjects Function
        $.each(this[timeline],function(){
             setObjects(tl);
             tl++; //Increment tl by One.
        });

        //Function to put each keyframe into its own array item.
        function setObjects(timelineNo){

            kf = 0; //Reset Keyframe Number
            timeFrames = []; //Reset / empty timeFrames Array.

            //put each timeframe into an array item.
             $.each(this[timeline][timelineNo].keyframes, function(){
                timeFrames[kf] = this;
                kf++; //increment kf by one.
             });

             //once the objects and keyframes have been setup run setNewVars();
            setNewVars(timeFrames,this[timeline][timelineNo].name);
         }


        //function which goes through each timeFrame
        function setNewVars(timeFrames, object){

                var currentKF = 0; //Setup the currentKF.

                //For each time frame array item work out whic keyframe is the start and end.
                $.each(timeFrames,function(){

                //if the timeframes time is smaller of = to t then -
                   if((timeFrames[currentKF].time >= t)){

                        //if t is not = to 0 then
                        if(t !== 0){

                                startTimeFrame = timeFrames[currentKF - 1]; //The start frame is the keyframe before current one
                                endTimeFrame = timeFrames[currentKF]; //End time frame is this current Keyframe.

                                //Work out the ratio.
                                var Ratio = (t - startTimeFrame.time) / (endTimeFrame.time - startTimeFrame.time);
                                var newX = startTimeFrame.posX + ((endTimeFrame.posX - startTimeFrame.posX) * Ratio); //New X Value;
                                var newY = startTimeFrame.posY + ((endTimeFrame.posY - startTimeFrame.posY) * Ratio); //New X Value;
                                var newOpacity = startTimeFrame.opacity + ((endTimeFrame.opacity - startTimeFrame.opacity) * Ratio); //New Opacity Value
                                var newRotation = startTimeFrame.rotation + ((endTimeFrame.rotation - startTimeFrame.rotation) * Ratio);
                                var newScale = startTimeFrame.scale + ((endTimeFrame.scale - startTimeFrame.scale) * Ratio);

                                //Actually update the object on this frame with the new values
                                object.setX(newX);
                                object.setY(newY);
                                object.setOpacity(newOpacity);
                                object.setRotation(newRotation);
                                object.setScale(newScale);

                                stage.draw();

                                 return;
                        }
                   }

                   currentKF++;
                }); //End of each Keyframe
        }


      setTimeout(function(){
           requestAnimationFrame(Animate);
           },1000/16.5);

}

 //Initial Animate Request

IntroAnimation.animationStart = new Date().getTime();
requestAnimationFrame(Animate);


    function Animation(name, timeline, animating, animationStart){
            this.name = name;
            this.timeline = timeline;
            this.animating = animating;
            this.animationStart = animationStart;
    }

    function ObjectTimeline(name,keyframes){
            this.name = name;
            this.keyframes = keyframes;
            this._classname = "MoveObject";
    }

    function ObjectKeyFrame(time,posX,posY,rotation,scale,opacity,easing){
            this.time = time;
            this.posX = posX;
            this.posY = posY;
            this.rotation = ( Math.PI / ( 360 / rotation ) ) *2;
            this.scale = scale;
            this.opacity = opacity;
            this.easing = easing;
    }




} //End of the main Draw Function.----------------------------------------------

//Image sources ----------------------------------------------------------------
var sources = {

        amberGreenBody: 'canvas/imgs/chars/amber-green-worry-behind.png',
        TheConeBody: 'canvas/imgs/chars/cone-look-behind.png',
        dynamoDanBody: 'canvas/imgs/chars/dan-smile-behind.png',
        introRoadBG: 'canvas/imgs/intro/background/roadBG.png',
        bottomOfRoad: 'canvas/imgs/intro/background/bottomOfRoad.png',
        water: 'canvas/imgs/intro/background/water.png',
        beatlesCarSprite: 'canvas/imgs/intro/cars/beatles-car.png',
        compactCarSprite: 'canvas/imgs/intro/cars/compact-car.png',
        rangeCarSprite: 'canvas/imgs/intro/cars/rangerover-car.png',
        sedanCarSprite: 'canvas/imgs/intro/cars/sedan-car.png'
      };


    //Once all the images are loaded draw the Canvas. ------------------------------
    loadImages(sources, function(images) {
     draw(images);
    });

//END OF CODE END