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。

需要一个渲染循环，在该循环中，每个循环都要清除并重画画布。Pixi提供了一个有用的代码，可用于在循环上运行函数。

这里是一个例子：

var line = new PIXI.Graphics(),
  centerY = 0,
  velocity = 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 + velocity : 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);
}

和jsfiddle。