Pixi.js - 如何为线条制作动画

【问题标题】：Pixi.js - How to animate a linePixi.js - 如何为线条制作动画
【发布时间】：2020-06-17 21:31:49
【问题描述】：

我到处寻找，但找不到在 Pixi.js 中为线条设置动画的方法。

鉴于此代码：

var line = new PIXI.Graphics();
line.lineStyle(1, 0xff0000);
line.moveTo(0,window.innerHeight/2);
line.lineTo(window.innerWidth/2, 0);
line.lineTo(window.innerWidth, window.innerHeight/2);
app.stage.addChild(line);

这幅画很壮观jsfiddle

我想实现这个非常简单的线条动画：

第一步

第 2 步

当然我猜这不应该很复杂，但我不知道我错过了什么......
任何帮助将不胜感激！

【问题讨论】：

标签： pixi.js

【解决方案1】：

在图形对象内部绘图在 API 术语中与在没有 Pixi 的情况下绘制到 Canvas 非常相似。

需要一个渲染循环，在每个循环中清除和重绘画布。 Pixi 提供了一个有用的 Ticker，可用于在循环中运行函数。

这是一个示例（在本例中为无限动画）和一个jsfiddle sample：

var line = new PIXI.Graphics(),
  centerY = 0,
  increment = 2;

app.stage.addChild(line);   

app.ticker.add(() => {
  // clear the graphics object ('wipe the blackboard')
  line.clear(); 

   // redraw a new line
  drawLine(centerY);

  // calculate the next position
  centerY = (centerY < window.innerHeight) ? centerY = centerY + increment : 0; 
});

function drawLine(centerY) {
    line.lineStyle(1, 0xff0000);
    line.moveTo(0,window.innerHeight/2);
    line.lineTo(window.innerWidth/2, centerY);
    line.lineTo(window.innerWidth, window.innerHeight/2);
}

【讨论】：