Tween過渡在動力學js

Question

我一直在使用舊的'transitionTo（）'在我的程序中，但由於Kineticjs使用吐溫，我有點失落。

我使用吐溫嘗試了simple shape transition和我有一些問題：

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/