javascript - Kinetic.JS sprite sheet 帧速率在每个 eevent 上翻倍

Question

完整示例：http ://codepen.io/thomasmurphymusic/pen/efzwC

blob.on('mouseover touchstart', function() {
   blob.start(); 
    blob.setAnimation('drip');
    blob.afterFrame(20, function(){
      blob.setAnimation('idle');        
    });
});  

我的事件监听器似乎在这里堆积。也就是说，在我的第二次鼠标悬停时，帧速率是两倍（我的理论是有两个事件侦听器，所以帧事件的速度是两倍），第三次是 3x，第四次是 4x，依此类推。

每次鼠标悬停时，如何防止事件侦听器发生多次？

Answer 1

blob.start();通过移出您的dripAnimation()（或mouseover事件）功能，我能够解决您描述的问题。

像这样：

var imageObj = new Image();

imageObj.onload = function(){
  var blob = new Kinetic.Sprite({
    x: 0,
    y: 0,
    image: imageObj,
    animation: 'idle',
    animations: animations,
    index: 0,
    width: 373,
    height: 414,
    frameRate: 15
  });

  layer.add(blob);

  stage.add(layer);

  blob.start(); 

  blob.on('mouseover touchstart', function() {
    dripAnimation();
  }, false);   

  function dripAnimation(){
    blob.setAnimation('drip');
    blob.afterFrame(20, function(){
      blob.setAnimation('idle');
    });
  }

};