javascript - 如何禁用和启用单击 KinectJS 形状？

Question

假设我为每个元素创建一个补间并将每个补间推入一个数组：

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. 启用点击元素

我怎么能做到这一点？

Answer 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);

边注：

如果您试图阻止用户多次单击补间，正如您在上一个线程中的 markE 的评论所建议的那样，在 each() 中应用补间，我该如何使用 reverse()？

click然后，我建议您使用两个选项，而不是像您在这个问题中要求的那样取消绑定和重新绑定事件：

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