Yuriy Dadichin

FE/PHP Developer at Cogniance

KineticJS - like a flash

Basics

Stage - just HTML block

Layer(s) - <canvas>es

Node - parent of all objects

Stage

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

Layer(s)

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

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

NODE

all elements are children of Node:

Blob
Circle
Sprite
e.t.c.

 var star = new Kinetic.Star({
  x: 100,
  y: 200,
  numPoints: 5,
  innerRadius: 70,
  outerRadius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});

You can group elements

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

group is node too

Selectors

(link)

by id - returns array with last added with Id

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

by name

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

by type

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

Events

mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, click, dblclick, dragstart, dragend

binding

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

unbinding

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

firing

rect1.fire('mouseover');

ANIMATIONS

Tween
Animation

Tween - simple Node transformation

to new set of parameters

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

// play tween
tween.play();

Tween events

onFinish

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

Tween work based on Animation

Animation

Nothing special at all

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();

What is frame?

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

What is inside:

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;
    }
};

Animation control

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

Examples and techniques

http://dadichin.name/

Typical Flash like approach

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

Same with Kineticjs

except last thing...

Create stage and layer

 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 );

Create animation

 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();

Yes, timeline

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

Yes, you can use Tween in animation

 {
    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();
    }
},

Performance

KINETICJS vs FLASH