0

プログラムで古い「transitionTo()」を使用してきましたが、Kineticjs が Tween を使用しているため、少し迷っています。

Tween を使用して単純な形状遷移を試みましたが、いくつかの問題があります。

  1. 何かを行う前に形状を別のポイントにドラッグしてから、遷移のボタンをクリックすると、形状は元のハードコードされた座標に戻り、遷移が実行されます。

    シェイプがドロップされた場所からトランジションを開始するようにします。

2.1回目はトランジションを行いますが、その後は全期間かかりません。ここで述べたように、遷移の終点に移動するだけです。

いくつかのコード:

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 に答える