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

我想要实现的是在补间之后立即禁用click事件，所以我可以应用reverse（），只有在调用reverse后，才能再次启用元素。

出于某种原因，多次单击一个元素可以打破相反的情况，而且它确实很古怪。

所以它会做以下事情：

点击元素
补间元素
禁用点击元素
点击反向按钮
反向元素
启用点击元素

我怎么能实现这个目标？

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

旁注：

如果您尝试阻止用户多次点击补间，请按照上一个帖子Applied tween inside each(), how do I use reverse()?

中markE的评论建议

然后我会建议两个选项，而不是像你在这个问题中所要求的那样解除绑定和重新绑定click事件：

如果您使用按钮仍然调用补间，请取消激活该按钮，直到补间完成，然后激活该按钮。这比解除绑定和重新绑定更清晰。

更好的可能是：每次单击“播放”时，不是创建新的Tween，而是创建所有补间并将其推入阵列。然后点击播放所有补间：

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，这会更新相关节点的位置，从而导致不需要的补间效果（并且过度填充tweenArray）

我已更新原始jsfiddle

如何禁用和启用KinectJS形状的点击？

1 个答案: