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

我在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为酒吧提供新职位，但它会立即更改。

最佳答案

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

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


使用所需的参数（位置，顶点位置，大小，颜色等）创建形状。
将此形状添加到您的舞台（直接添加到舞台或舞台中的某个容器中）。
渲染阶段。
从舞台（或从容器-如果已添加到其他容器）中删除此形状。


这还应该允许垃圾收集器从内存中清除该对象-因此，在此循环运行一段时间后，内存将不会填满。

更改一些参数，以便在下一次迭代中在点1处创建它。

关于javascript - 在PIXI.js中正确制作简单图形的动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61362514/