Pixi.js - How to animate a line - pixi.js

Question

I've been looking everywhere but I can't find a way to animate a line in Pixi.js.
Given this code:
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);
which draws this magnificient jsfiddle
I'd like to achieve this very simple line animation:
Step 1
Step 2
Of course I'm guessing this should not be complicated, but I've no idea what I'm missing...
Any help will be appreciated!

Answer 1

Drawing inside a graphics object is very similar in API terms to drawing to a Canvas without Pixi.
A render loop is needed where the canvas is cleared and redrawn on every loop.
Pixi provides a useful Ticker that can be used to run functions on a loop.
Here's an example (in this case an infinite animation) and a 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);
}