Kinetic js 中的补间过渡

Question

我一直在我的程序中使用旧的“transitionTo()”，但由于 Kineticjs 使用的是 Tween，我有点迷茫。

我使用 Tween 尝试了 simple shape transition，但遇到了一些问题：

1. 如果在执行任何操作之前将形状拖到另一个点，然后单击转换按钮，形状会回到原始硬编码坐标，然后进行转换。

   我希望形状在它被丢弃的地方开始过渡。

2.第一次它会进行过渡，但之后不会占用整个持续时间。它只会转移到过渡的终点，就像提到的here。

一些代码：

var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });
  
  layer.add(rect);
  stage.add(layer);
 
 
 var tween = new Kinetic.Tween({
        node: rect,
        x: 200,
        y: 200,
        rotation: 0,
        duration:5
});
    

上面提供的jsFiddle。

任何帮助将不胜感激；谢谢 :)

Answer 1

这就是我为解决您的问题而提出的建议：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 700,
    height: 300
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
});

layer.add(rect);
stage.add(layer);





document.getElementById('run').addEventListener('click', function() {
    var tween = new Kinetic.Tween({
        node: rect,
        x: 200,
        y: 200,
        rotation: 0,
        duration:5
    });
    tween.play();
}, false);

此刻只需实例化 Tween 过渡，您想使用它。否则，转换将从您实例化它时的位置开始。

这是你对我的提议的看法：http://jsfiddle.net/kMvzy/