当鼠标悬停在舞台内时，KineticJS 补间不运行答案

【问题标题】：KineticJS tween doesn't run when mouseover is within stage当鼠标悬停在舞台内时，KineticJS 补间不运行
【发布时间】：2013-08-30 05:30:20
【问题描述】：

我在一个图层中设置了 3 个形状并将其添加到舞台上。这 3 个形状都有一个 mouseover/mouseenter 事件监听。当它触发它们的一些属性时，它们会产生动画。

当鼠标悬停在舞台外时效果很好，但是当将鼠标悬停在每个形状上从一个到另一个时，事件会触发但没有补间。

我添加了 stage.draw();和 layer.draw();但什么都没有。

这是一个 codepen 示例：http://codepen.io/netgfx/pen/JDBIc

请注意，将鼠标悬停在 console.log 中的形状上时，消息显示正确，但补间不会触发...

【问题讨论】：

标签： javascript canvas mouseover kineticjs tween

【解决方案1】：

我看到的第一件事是您无法控制将图像添加到舞台/图层的顺序。因此，每张图像可能在不同的时间完成加载并在不同的时间添加到舞台/图层。

您可以通过两种方式解决此问题：

通过执行类似的操作来订购您的图像加载：

var img1 = new Image();
img1.onload = function() { //Load first image
  //Create 1st Kinetic Object
  var img2 = new Image();
  img2.onload = function() { //Load second image after first image has been loaded
    //Create 2nd Kinetic Object
    var img3 = new Image();
    img3.onload = function() { //Load third image after 2nd image is loaded
      //Create 3rd Kinetic Object
    }
  }
}

在您正在补间的 3 个形状上使用 zIndex，请参阅 zIndex 的文档。（请注意，函数拼写为 zIndex，而对象属性拼写为 zindex

第二个问题（你的问题）是同时调用 2 个补间，但只有 1 个被解雇。我相信顺序是这样的：

Middle Mouseout 触发补间。
Left 或 Right Mouseenter 会在之后立即触发补间，但由于 mouseout 补间而不会发生这种情况

与其在每次 mouseenter 和 mouseout 时创建一个补间并在完成时销毁它们，不如在 mouseenter 上创建一次补间并 .play() 它们，然后在 mouseout 上调用 .reverse()。通过这样做，您可以节省所需的补间数量，并防止播放影响相同节点的补间之间的冲突。

【讨论】：