Kinetic.JS精靈每個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

我能夠解決您在dripAnimation()（或mouseover事件）函數之外移動blob.start();所述的問題。

喜歡分享：

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

};