Pixi.js

Question

我找遍了所有地方，但找不到在 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

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

第 1 步

第 2 步

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

Answer 1

在图形对象内部绘图在 API 方面与在没有 Pixi 的 Canvas 中绘图非常相似。

需要一个渲染循环，其中 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);
}

Pixi.js - 如何为线条设置动画

Pixi.js - How to animate a line