在KineticJS的dragend事件中动画并移动可拖动的形状

Question

我想在拖动KineticJS后将可拖动的形状移动到另一个位置。我想在一段时间内（例如超过1秒）动画化形状的运动。例如，我创建一个可拖动的形状并保存其初始xy坐标。我在这个形状上注册了一个“dragend”事件。然后，我将形状拖到新的位置。当我释放拖动时，dragend事件被调用。在那个事件函数中，我想动画/将形状恢复到原始位置。看到我的JSFiddle的完整示例：DragSample。

(function() { 

//create variables at global scope 
var layer; 
var stage; 
var triangle; 
var triangleLastX = 190; 
var triangleLastY = 120; 
var tween; 

function initTween() { 
    tween = new Kinetic.Tween({ 
     node: triangle, 
     duration: 1, 
     easing: Kinetic.Easings.EaseInOut, 
     x: 400, 
     y: 200, 
    }); 
} 

this.init = function() { 
    layer = new Kinetic.Layer(); 

    stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 800, 
     height: 600 
    }); 

    triangle = new Kinetic.RegularPolygon({ 
     x: 190, 
     y: 120, 
     sides: 3, 
     radius: 80, 
     fill: '#00D2FF', 
     stroke: 'black', 
     strokeWidth: 4, 
     draggable: true 
    }); 

    triangle.on('dragstart', function() { 
     triangleLastX = triangle.attrs.x; 
     triangleLastY = triangle.attrs.y; 
    }); 

    triangle.on('dragend', function() { 
     tween.play(); 
     stage.draw(); 
    }); 
    layer.add(triangle); 
    stage.add(layer); 
    initTween(); 
} 

window.onload = init(); 
})(); 

我试过这样做了几种方法。我试图做的最后一种方法是使用Kinetic的Tween（），但是，当我从dragend事件处理函数播放该Tween时，它立即将形状移回原始位置（即拖动开始时的位置），然后应用Tween。

是否有任何方法可以使用KineticJS在dragend中实现将可拖动形状的运动动画化为原始位置（或其他任何位置）？

Answer 1

正如我在上面的评论中提到的，我找到了解决方案，那就是简单地在dragend事件处理程序中调用我的initTween（）函数。以下是DragSample的更新源

(function() { 

//create variables at global scope 
var layer; 
var stage; 
var triangle; 
var triangleLastX = 190; 
var triangleLastY = 120; 
var tween; 

function initTween() { 
    tween = new Kinetic.Tween({ 
     node: triangle, 
     duration: 1, 
     easing: Kinetic.Easings.EaseInOut, 
     x: triangleLastX, 
     y: triangleLastY, 
    }); 
} 

this.init = function() { 
    layer = new Kinetic.Layer(); 

    stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 800, 
     height: 600 
    }); 

triangle = new Kinetic.RegularPolygon({ 
    x: 190, 
    y: 120, 
    sides: 3, 
    radius: 80, 
    fill: '#00D2FF', 
    stroke: 'black', 
    strokeWidth: 4, 
    draggable: true 
}); 

triangle.on('dragstart', function() { 
}); 

triangle.on('dragend', function() { 
    initTween(); 
    tween.play(); 
    stage.draw(); 
}); 
layer.add(triangle); 
stage.add(layer); 
} 

window.onload = init(); 
})();