动画在一段时间后延迟- Easeljs缓存

Animation lagging after sometime - Easeljs caching

本文关键字：Easeljs 缓存 延迟 一段时间 动画      更新时间：2023-09-26

动画在加载时工作正常，但过一段时间后它会滞后。一开始我在for循环中创建了新的drops变量。全球化并没有帮助。fps等于40,particles等于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都不同

简化如下:

  1. 绘制一次形状(0,0)并缓存
  2. 使用位图代替，并指向缓存的形状
  3. 每次直接设置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);

你可以做的另一件事是，这在粒子引擎中很常见，那就是汇集你的粒子，而不是不断地破坏/创造它们。

查看这里的答案:EaselJS与200+矢量形状:性能和美学

你不应该在每一帧中创建一个新的Shape。而是只做一次，然后把它保存在某个地方，然后添加到舞台上。之后，只需更新图形命令即可。如果您需要进一步的帮助，请随意发布一个工作示例(在jsfiddle上)，我会相应地更新它。

相关文章：