Question

我想动画一个可拖动的形状在KineticJS中被拖动后移动到另一个位置。我想在一段时间内（例如，超过1秒）动画形状的运动。例如，我创建一个可拖动的形状并保存其初始xy坐标。我注册了一个＆＃34; dragend＆＃34;这个形状的事件。然后，我将形状拖动到一个新位置。当我释放拖动时，会调用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中实现可拖动形状移动到其原始位置（或任何其他位置）的动画？

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();
})();

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

1 个答案: