Question

我一直在我的程序中使用旧的'transitionTo（）'，但由于Kineticjs正在使用Tween，我有点迷失。

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

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

我希望形状开始转移它的位置。

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。

任何帮助将不胜感激; thanx：）

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/

Kinetic js中的Tween过渡

1 个答案: