Pixi.js：动画圈（提高性能）

Question

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

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

遗憾的是，这太贵了...有没有办法避免清除圆圈或其他可以加速渲染循环的方法？

Answer 1

如果你在每个支架上都有一个参考（例如在一个数组中），你可以在每个循环上更新它们的位置/着色等。

Answer 2

您可以尝试以下几项方法来提高效果：

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

我不确定您想要通过1000个圈子实现什么目标，但如果您在问题中添加示例，我可以通过优化提示更加具体。