在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点创建稍微不同的值

Answer 2

多亏了@domis86和@PAEz，我尝试实现了它，并将它改进为以下代码。我用了一个口罩，但它应该也可以直接调整宽度。

var mask_width = 0;
var loading_bar = setInterval(function () {
if (mask_width < bar_width) {
var this_mask = new PIXI.Graphics();
this_mask.beginFill(0xff3300);
this_mask.drawRect(my_x, my_y * line, bar_width, bar_height);
this_mask.endFill();
bar.mask = this_mask;
mask_width += 1;
} else {
bar.mask = null;
clearInterval(loading_bar);
}
}, 10);

此代码每隔10ms应用一个覆盖范围略有增加的新口罩，直到达到完整宽度。