当鼠标悬停在舞台内时,KineticJS青少年不会运行

我看到的第一个问题是,你无法控制图像添加到舞台/图层的顺序。正因为如此,每个图像可以在不同的时间完成加载,并在不同的时刻添加到阶段/层。

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

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

2. 使用 zIndex 关于你正在花呢的3个形状,请参阅文档 zIndex 。(请注意,函数拼写为 z索引 而对象属性拼写为 Z指数

第二个问题(你的问题)是,两个tween同时被呼叫,但其中只有一个被解雇。我相信顺序是这样的:

1. Middle Mouseout点燃了青少年。
2. 鼠标左键或右键紧接着就触发了tween,这从来没有发生过,因为mouseout tween

与其每次mouseenter和mouseout都创建一个tween并在Finish上销毁它们,为什么不创建一次tween并 .play() 他们在mouseenter上,然后调用 .reverse() 鼠标悬停时。通过这样做,您可以节省所需的tween数量,并防止影响相同节点的tween之间的冲突。