动态.JS精灵表帧速率在每个事件上加倍

Kinetic.JS sprite sheet frame rate doubles on each eevent

本文关键字：事件 JS 精灵 帧速率 动态      更新时间：2023-09-26

完整示例：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 倍，依此类推。

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

我能够通过将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');
    });
  }
};
相关文章：