Question

I am developing an HTML5 canvas based mini-game and I can’t seem to organize linear animation.

I am using this code for adding a “target” object to the canvas:

var target = new Kinetic.Shape(function(){
    var context = this.getContext();
    context.drawImage(images.target, x, y, 2*radius, 2*radius);
    context.beginPath();
    context.rect(x, y, 2*radius, 2*radius);
    context.closePath();
});
gameLayer.add(target);

I need to animate this object with linear animation, trying this code:

var mx = x;
setInterval(function(){
   mx -= 1;
   target.setPosition(mx, y);
   gameLayer.draw();
}, 500);

But, it didn’t work! What is wrong?

Answer 1

I don’t know why it doesn’t work, but I found the way to do as:

var mx = x;
var my = target.y;
target.transitionTo({
   x: mx,
   y: my,
   rotation: 0,
   scale: {x: 1, y: 1},
   duration: 1, //time to transition in second
});

You can see more details at: http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/