Переход Tween в кинетическом js

Question

Я использовал старую 'transitionTo()' в моей программе, но так как Kineticjs использует Tween, я немного потерян.

Я попробовал simple shape transition с помощью Tween и у меня есть некоторые вопросы:

1. Если перетащить форму в другую точку, прежде чем делать что-либо, а затем нажмите на кнопку для перехода, форма возвращается к исходным жестко закодированным координатам, а затем переходит к переходу.

   Я хочу, чтобы форма начала перехода туда, где она была удалена.

2. В первый раз он будет осуществлять переход, но впоследствии он не займет всю продолжительность. Он просто переместится в конечную точку перехода, как упомянуто here.

Некоторые коды:

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 Приведенную выше.

Любая помощь будет оценена по достоинству; спасибо :)

Answer 1

Это то, что я хотел бы предложить, чтобы решить ваши проблемы:

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

Просто используйте переход твин в данный момент, вы хотите использовать его. В противном случае переход начнется с позиции в момент ее создания.

Вот вилка вашей скрипки с моим предложением: http://jsfiddle.net/kMvzy/