在KineticJS dragend活动中动画和移动可拖动的形状

时间:2014-06-05 21:21:57

标签: javascript kineticjs

我想动画一个可拖动的形状在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时,它会立即将形状移回其原始位置(即拖动时的位置)开始),然后应用补间。

使用KineticJS有没有办法在dragend中实现可拖动形状移动到其原始位置(或任何其他位置)的动画?

1 个答案:

答案 0 :(得分:0)

正如我在上面的评论中提到的,我找到了解决方案,那就是在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();
})();