動畫在某段時間後滯後 - Easeljs緩存

動畫在加載時工作正常，但過了一段時間它就會滯後。首先，我在for循環中創建了新的drops變量。讓它成爲全球並沒有幫助。 fps是40與5 particles。任何幫助？動畫在某段時間後滯後 - Easeljs緩存

function init(){ 
    stage = new createjs.Stage("rain-canvas"); 
    createjs.Ticker.setFPS(fps); 
    createjs.Ticker.addEventListener("tick", refresh); 
} 

function refresh(){ 
    for(var i = 0; i < particles; i++){ 
    drops = new createjs.Shape(); 
    xxx = Math.random() * viewportWidth; 
    yyy = -10 + Math.random() * 10; 
    drops.graphics.beginFill('#fff').rect(xxx, yyy, 2, 18); 
    drops.alpha = 0.15 + Math.random() * 0.5; 
    stage.addChild(drops); 

    TweenLite.to(drops, 1.25, {y: viewportHeight + 150, 
     onComplete: function(){ 
     stage.removeChild(drops); 
     }, ease: Power1.easeNone 
    }); 
    }; 
    stage.update(); 
}

來源

2016-09-27 Safal Pillai

@derz答案已經足夠，但我想提出一個建議。

粒子應該幾乎肯定不是形狀。你有幾百個形狀後，形狀變得非常昂貴。緩存可以產生巨大的差異，對於您的情況，只有一種形狀，儘管每次都以不同的方式繪製x/y。

爲了簡化此：

畫出形狀一次（在0,0）和緩存它
使用位圖來代替，並指向高速緩存的形狀
設置x直接/ y各時間

下面是一個簡單示例：http://jsfiddle.net/r0f04fvt/

高速緩存的形狀

var template = new createjs.Shape(); 
template.graphics.beginFill('#fff').rect(0, 0, 2, 18); 
template.cache(0,0,2,18); // Cache it 

var drops = new createjs.Bitmap(template cacheCanvas);

一個額外的事情你可以做的，這是常見的粒子引擎是集中你的粒子，而不是不斷地摧毀/創建它們。查看對象池以獲取更多信息。

來源

2016-09-27 15:23:57 Lanny