Pixi.js：动画圆（提高性能）答案

【问题标题】：Pixi.js: Animate circle (improving performance)Pixi.js：动画圆（提高性能）
【发布时间】：2016-01-30 22:31:58
【问题描述】：

我想为 1000 个圆设置动画（位置、半径、alpha、填充、描边）。我正在使用的当前方法涉及更新 Graphics 对象的一些属性，然后还为每个 draw() 清除和重新创建圆。

 holder = new PIXI.Graphics();
 holder.lineStyle(strokeWidth, strokeColor, strokeOpacity);
 holder.beginFill(color);
 holder.drawCircle(r, r, r);
 holder.endFill();

不幸的是，这太贵了……有什么方法可以避免清除圆圈或其他可以加快渲染循环的方法吗？

【问题讨论】：

如果你有一个可控数量的圈子：例如组合描边属性，然后就可以使用精灵表了。这比图形对象快得多。如果您需要不同的尺寸，您可以缩放烈酒。
那应该是品种而不是辣味

标签： performance pixi.js

【解决方案1】：

如果您在每个持有人上持有参考（例如在数组中），您只需在每个循环上更新他们的位置/着色等。

【讨论】：

【解决方案2】：

您可以尝试一些方法来提高性能：

确保您只使用一个 PIXI.Graphics（或尽可能少的对象）对象，该对象是在初始化时创建的，而不是在每个 animFrame 上创建的。在该对象上绘制所有圆圈并仅对其进行操作。
如果您不必更改每个圆的属性，请尝试将相似的属性分组，然后您可以从中生成纹理，这样您仍然可以控制位置、大小和 alpha。
尽量限制更新圈子，这样就不会在每次抽奖时发生。你真的需要每秒 60 次更新吗？如果这样做，请尝试对圆圈进行分组并更新，例如在一帧中更新其中的 100 个，在下一帧中更新接下来的 100 个，依此类推...

我不确定你到底想用 1000 个圆圈实现什么，但如果你在问题中添加一个示例，我可以更具体地提供优化提示。

【讨论】：