• Stage - just HTML block
• Layer(s) - <canvas>es
• Node - parent of all objects

var stage = new Kinetic.Stage({
  width: 500,
  height: 800,
  container: 'containerId'
});

var layer1 = new Kinetic.Layer();
stage.add( layer1 );

var layer2 = new Kinetic.Layer();
stage.add( layer2 );

• Blob
  
• Circle
  
• Sprite
  
• e.t.c.
  

var group = new Kinetic.Group();
group.add( star );
group.add( sprite );
group.add( other_group );

 var shapeById = stage.find('#rectangle');

 var shapeByName = stage.find('.rect');

 var shapeByType = stage.find('Rect');

rect1.on('mouseover mousedown mouseover.named', function(){
  console.log('event');
});

rect1.off('mouseover');rect1.off('mouseover.named');

rect1.fire('mouseover');

• Tween
  
• Animation
  

var tween = new Kinetic.Tween({
  node: node, // on some layer!!!
  rotationDeg: 360,
  duration: 1
});

// play tween
tween.play();

• onFinish

 var tween = new Kinetic.Tween({
  node: rect1, 
  duration: 4,
  rotation: 200,
  easing: Kinetic.Easings.BackEaseOut
  onFinish: function() {
    console.log('tween finished!');
  }
});

var amplitude = 50;
var period = 2000;
// in ms
var centerX = stage.width()/2;

var anim = new Kinetic.Animation(function(frame) {
rect1.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);

anim.start();

 {
    time: 2025, // animation run time ms
    timeDiff: 17, // time from last frame update
    lastTime: 1390431113575, // timestamp of last frame
    frameRate: 58.823529411764 // fps
} 

Kinetic.Animation._animationLoop = function() {
    var that = this;
    if(this.animations.length > 0) {
        this._runFrames(); // run frame call-back and refresh layer(s)
        Kinetic.Animation.requestAnimFrame(function() {
            that._animationLoop();
        });
    }
    else {
        this.animRunning = false;
    }
};

• start()
  
• stop()
  
• setLayers(<array>)
  

• layers
• timeline
• elements on layer do something depending on time
• mouse work

 var stage = new Kinetic.Stage({
    container: 'stage',
    width: wWidth,
    height: wHeight
});
stage.staff = {};
stage.staff.layer = new Kinetic.Layer({
    id : "main_layer"
});
stage.add( stage.staff.layer );

 var anim = new Kinetic.Animation(function(frame) {
    if( actions.length ){
        if( frame.time > actions[0].time ){
            actions[0].action( stage, stage.staff.layer, this,               frame );
            actions.removeElement( actions[0] );
        }
    } else {
        this.stop();
    }

}, stage.staff.layer );

anim.start();

 var timeline = [
    {
        time    : 40,
        action  : function( stage, layer, animation, frame ){
            // TODO
        }
    },
    ...
    {
        time    : 100500,
        action  : function( stage, layer, animation, frame ){
            // TODO
        }
    }
];

 {
    time    : 7900,
    action  : function( stage, layer, animation, frame ){
        
        new Kinetic.Tween({
            opacity: 1,
            scaleX: 0.4,
            scaleY: 0.4,
            node: stage.find('#zf')[0],
            duration: 0.4,
            easing: Kinetic.Easings.ElasticEaseOut
        }).play();
    }
},