0

完全な例: http://codepen.io/thomasmurphymusic/pen/efzwC

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

私のイベントリスナーはここに積み重なっているようです。つまり、2 回目のマウスオーバーでは、フレームレートが 2 倍速くなり (私の理論では、イベント リスナーが 2 つあるため、フレーム イベントは 2 倍速くなります)、3 回目は 3 倍、4 回目は 4 倍、などです。

マウスオーバーするたびにイベントリスナーが複数回発生するのを防ぐにはどうすればよいですか?

4

1 に答える 1

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');
    });
  }

};
于 2013-10-29T14:30:16.850 に答える