I would like to animate moving a draggable shape to another position after it has been dragged in KineticJS. I would like to animate the movement of the shape over a period of time (for example, over 1 second). For example, I create a draggable shape and save its initial xy coordinates. I register a "dragend" event on this shape. Then, I drag the shape to a new position. When I release the drag, the dragend event is called. In that event function, I want to animate/ease the shape back to its original position. See my JSFiddle for a complete example: 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();
})();
I have tried doing this several ways. The last way I attempted to do this was using Kinetic's Tween(), however, when I play this Tween from the dragend event handler function, it moves the shape back to its original position immediately (i.e. the position when the drag started), then applies the Tween.
Is there any way to achieve animating the movement of a draggable shape to its original position (or any other position for that matter) in dragend using KineticJS?
