Tween transition in Kinetic js

Question

I've been using the old 'transitionTo()' in my program but since Kineticjs is using Tween, i am a bit lost.

I've tried a simple shape transition using Tween and i've got some issues:

1. If you drag the shape to another point before doing anything, then click on the button for the transition, the shape comes back to the original hard coded coordinates and then does the transition.

   I want the shape to start the transition where it has been dropped.

2.The 1st time it will do the transition, but afterwards it won't take the whole duration. It will just shift to the end point of the transition, like mentioned here.

Some codes:

var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });
  
  layer.add(rect);
  stage.add(layer);
 
 
 var tween = new Kinetic.Tween({
        node: rect,
        x: 200,
        y: 200,
        rotation: 0,
        duration:5
});
    

jsFiddle provided above.

Any help will be appreciated; thanx :)

Answer 1

This is what I would propose to solve your problems :

var stage = new Kinetic.Stage({
    container: 'container',
    width: 700,
    height: 300
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
});

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





document.getElementById('run').addEventListener('click', function() {
    var tween = new Kinetic.Tween({
        node: rect,
        x: 200,
        y: 200,
        rotation: 0,
        duration:5
    });
    tween.play();
}, false);

Just instantiate the Tween transition at the moment, you want to use it. Otherwise, the transition will start with the position at the moment you instantiated it.

Here is the fork of your fiddle with my proposal : http://jsfiddle.net/kMvzy/