一段时间后动画滞后 - Easeljs 缓存答案

【问题标题】：Animation lagging after sometime - Easeljs caching一段时间后动画滞后 - Easeljs 缓存
【发布时间】：2017-02-04 21:02:00
【问题描述】：

动画在加载时运行良好，但一段时间后它会滞后。我最初在 for 循环中创建了新的 drops 变量。使其全球化并没有帮助。 fps 是 40 和 5 particles。有什么帮助吗？

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

【问题讨论】：

标签： javascript html5-canvas createjs easeljs

【解决方案1】：

@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);

您还可以做的另一件事，这在粒子引擎中很常见，就是汇集您的粒子，而不是不断地破坏/创建它们。查看对象池以获取更多信息。

【讨论】：

【解决方案2】：

在这里查看答案：EaselJS with 200+ vector shapes : performance and aesthetics

您不应该在每一帧中都创建一个新的Shape。而是执行一次并将其保存在某个地方并将其添加到舞台上。之后，您可以只更新图形命令。如果您需要进一步的帮助，请随时发布一个工作示例（在 jsfiddle 上），我会相应地更新它。

【讨论】：