Question

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

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

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

每次鼠标悬停时，如何防止多次出现事件监听器？

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

};

Kinetic.JS精灵表的帧率在每个事件中加倍

1 个答案: