0

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

我尝试使用 Tween进行简单的形状转换，但遇到了一些问题：

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

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

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

一些代码：

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。

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

4

1 回答 1

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/

于 2013-06-03T07:19:32.097 回答