在PIXI.js中正确制作一个简单的图形动画

Question

我在PIXI中有一个图形，我想通过流畅的过渡将其简单地向左扩展。在研究官方文档后，我真的没有找到任何最佳实践或在这里做什么。

我的代码当前看起来像这样

var bar = new PIXI.Graphics();
bar.beginFill(color);
bar.lineStyle(1, 0x000000, 10);
bar.drawRect(
  my_x,
  my_y * line,
  bar_width,
  bar_height
);

并以最终形状正确显示钢筋。我的问题现在是如何从0开始缓慢扩展。

[我尝试通过bar.length = final_pos给小节一个新位置，但它立即发生变化。

Answer 1

[请检查我对有关在Pixi.js中设置图元/形状动画的类似问题的回答：https://stackoverflow.com/a/60515362/3174731。我在那里展示了如何为多边形设置动画（drawPolygon方法），但类似地，您也可以使用矩形（drawRect）来制作它。

主要思想是对“主循环”的每次迭代执行以下操作：

1. 使用所需的参数（位置，顶点的位置，大小，颜色等）创建形状。
2. 将此形状添加到舞台（直接添加到舞台或舞台中的某个容器中。）
3. 渲染阶段。
4. 从舞台（或从容器-如果已添加到其他容器）中移除此形状）>
5. 更改一些参数，以便在下一次迭代时，它在点1处会稍有不同。