Question

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

当鼠标悬停从舞台外部发生时，它可以很好地工作，但是当将每个形状从一个悬停在另一个上时，事件会触发，但没有补间。

我添加了stage.draw（）;和layer.draw（）;但没什么。

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

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

Answer 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 ，而object属性拼写为 zindex

第二个问题（你的问题）是同时调用了两个补间，但只有一个被触发。我相信订单是这样的：

中间鼠标会触发补间。
左或右鼠标中心立即触发补间，因为鼠标移除补间

不是每次使用mouseenter和mouseout并在onFinish上销毁它们时都创建补间，为什么不在mouseenter上创建一次补间和.play()它们，并在mouseout上调用.reverse()。通过执行此操作，您可以保存所需的补间数量，并防止播放影响相同节点的补间之间的冲突。

当鼠标悬停在阶段内时，KineticJS补间不会运行

1 个答案: