在 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 中关于动画基元/形状的类似问题的回答：。在那里，我展示了如何为多边形设置动画（drawPolygon 方法）——但类似地，您可以使用矩形 (drawRect).

主要思想是在 "main loop" 的每次迭代中执行以下操作：

使用所需参数（位置、顶点位置、大小、颜色等）创建形状。
将此形状添加到您的舞台（直接到舞台或舞台上的某个容器）。
渲染阶段。
从舞台（或容器 - 如果已添加到其他容器）中删除此形状。
- 这还应该允许垃圾收集器从内存中清除该对象 - 因此在该循环一段时间后内存将不会填满运行。
更改一些参数，以便在下一次迭代中创建的第 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);

此代码应用一个新掩码，每 10 毫秒覆盖范围略有增加，直到达到完整宽度。

在 PIXI.js 中正确设置简单图形的动画

Animating a simple graphic correctly in PIXI.js

javascript

animation

pixi.js