0

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

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

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

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

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

4

1 回答 1

0

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

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

  1. 通过执行以下操作来订购您的图像 onload：

    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
    }
  }
}

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

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

  1. Middle Mouseout 触发补间。
  2. Left 或 Right Mouseenter 在之后立即触发补间，由于 mouseout 补间，这永远不会发生

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

于 2013-08-27T16:09:21.080 回答