Animating and moving a draggable shape in KineticJS's dragend event

Posted by user3712941 on Stack Overflow See other posts from Stack Overflow or by user3712941
Published on 2014-06-05T21:21:56Z Indexed on 2014/06/05 21:24 UTC
Read the original article Hit count: 137

Filed under:
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about kineticjs