0

要素ごとにトゥイーンを作成し、各トゥイーンを配列内にプッシュするとします。

var myArray = [];

data.on('click', function () {
    var layer = this.parent.parent;
    var elements = layer.get(".element");

    elements.each(function (element) {
        myTween = new Kinetic.Tween({
            node: elements[0],
            angleDeg: 60,
            easing: Kinetic.Easings.EaseInOut,
            rotationDeg: 180
        }).play();
        myArray.push(myTween );
    });
})

次に、配列をループして、ボタンをクリックしたときにreverse()を適用します。

button.on('click', function () {
    for (var i = 0; i < myArray.length; i++) {
        myArray[i].reverse();
    }
}, false);

私が達成しようとしているのは、トゥイーンの直後にクリック イベントを無効にすることです。そのため、reverse() を適用できます。リバースが呼び出された後にのみ、要素のクリックを再度有効にします。

何らかの理由で、要素を数回クリックすると、逆が壊れて、奇妙なことが起こります。

したがって、次のようになります。

  1. 要素をクリック
  2. トゥイーン要素
  3. 要素のクリックを無効にする
  4. 反転ボタンをクリック
  5. 逆要素
  6. 要素のクリックを有効にする

どうすればこれを達成できますか？

4

1 に答える 1

1

関数を使用して.off()イベントのバインドを解除できます: http://www.html5canvastutorials.com/kineticjs/html5-canvas-remove-event-listener-with-kineticjs/

そして、あなたはすでに関数の使い方を知ってい.on()ます。

少し簡単にするために、.on()関数をカスタム関数に入れます。この例では、それを呼び出しますbindTweenClick()

dataをクリックしたら、 を使用します.off('click')。

クリックするbuttonと、トゥイーンが逆になり、イベントが再バインドされます。

function bindTweenClick() {
  data.on('click', function () {
    var layer = this.parent.parent;
    var elements = layer.get(".element");

    elements.each(function (element) {
      myTween = new Kinetic.Tween({
        node: elements[0],
        angleDeg: 60,
        easing: Kinetic.Easings.EaseInOut,
        rotationDeg: 180
      }).play();
      myArray.push(myTween );
    });
    this.off('click');
  })
}(); // <-- Self Invoke

button.on('click', function () {
  for (var i = 0; i < myArray.length; i++) {
    myArray[i].reverse();
  }
  bindTweenClick();
}, false);

サイドノート：

この前のスレッド Applied tween inside each() の markE からのコメントで示唆されているように、ユーザーがトゥイーンを複数回クリックできないようにするには、reverse() をどのように使用すればよいですか?

click次に、この質問で求めているようにイベントのバインドを解除して再バインドする代わりに、 2 つのオプションを提案します。

  1. ボタンを使用してトゥイーンを呼び出している場合は、トゥイーンが終了するまでボタンを非アクティブにしてから、ボタンをアクティブにします。これは、バインドを解除して再バインドするよりもクリーンです。

  2. 「再生」をクリックするたびに新しいトゥイーンを作成する代わりに、すべてのトゥイーンを作成して配列にプッシュします。次に、クリックですべてのトゥイーンを再生します。

    elements = stage.get('Rect');
var tweenArray = [];

elements.each(function (element) {
  var tween = new Kinetic.Tween({
    node: element,
    rotationDeg: 180
  });
  tweenArray.push(tween);
});

// reverse tween
document.getElementById('reverse').addEventListener('click', function () {
  for (var i = 0; i < tweenArray.length; i++) {
    tweenArray[i].reverse();
  }
}, false);

// play tween forward
document.getElementById('play').addEventListener('click', function () {
  for (var i = 0; i < tweenArray.length; i++) {
    tweenArray[i].play();
  }
}, false);

    この方法では、毎回クリック時に新しい Tween を作成する必要がなく、問題のノードの位置が更新され、望ましくない tween 効果が発生します (そして が過密になりますtweenArray) 。

元のjsfiddleを更新しました

于 2013-08-01T00:22:23.943 に答える