动画在加载时工作正常,但一段时间后就会出现滞后。我首先在 for 循环内创建新的 drops
变量。使其全局化并没有帮助。 fps
为 40,有 5 个粒子
。有什么帮助吗?
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();
}
最佳答案
@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);
您可以做的另一件事(这在粒子引擎中很常见)是池化粒子,而不是不断地销毁/创建它们。查看对象池以获取更多信息。
关于javascript - 动画在一段时间后滞后 - Easeljs 缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39721120/