Animating a shape across a polyline using transitions in KineticJS.

KineticjsPolylineTransition.js

(function(){

//[x,y]
var examplePolyline = [[10,10], [50,50], [50,100], [20,20], [60,100],[200,200],[0,0]];

      var stage = new Kinetic.Stage({
        container: 'myCanvas',
        width: 600,
        height: 400
      });
      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 50,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 1,
        opacity: 1
      });

      layer.add(rect);
      stage.add(layer);

var moveCharacter = function(rect, polyline) {

  var point = polyline.shift(0);

	if (point) {
		var mx = point[0]
		,   my = point[1];

	  	rect.transitionTo({
	    	 x: mx, 
	    	 y: my, 
	    	duration: 1, 
	    	callback: function (){
	    	  moveCharacter(rect, polyline);
	    	}
  		})
	}
}

moveCharacter(rect, examplePolyline);

})();