Is it possible to animate the drawing of a line in Pixi.js? (Canvas, WebGL, whatever.)

I pletely understand how to animate an already-rendered line or object, but how do you make it animate the drawing of the line itself, as if with TweenMax? I've searched exhaustively through examples and code, and I'm shocked that I have been unable to find a single point of reference for doing this.

Fiddle.

var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();

graphics.lineStyle(20, 0x33FF00);
graphics.moveTo(30,30);
graphics.lineTo(600, 300);

stage.addChild(graphics);

animate();

function animate() {
    renderer.render(stage);
    requestAnimationFrame( animate );
}

Is it possible to animate the drawing of a line in Pixi.js? (Canvas, WebGL, whatever.)

I pletely understand how to animate an already-rendered line or object, but how do you make it animate the drawing of the line itself, as if with TweenMax? I've searched exhaustively through examples and code, and I'm shocked that I have been unable to find a single point of reference for doing this.

Fiddle.

var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();

graphics.lineStyle(20, 0x33FF00);
graphics.moveTo(30,30);
graphics.lineTo(600, 300);

stage.addChild(graphics);

animate();

function animate() {
    renderer.render(stage);
    requestAnimationFrame( animate );
}

• javascript
• animation
• pixi.js

1 Answer 1

You need to do the animation yourself - draw it short first, and then make it longer and longer.

For example, here I added a variable "p" (for percentage), that goes from 0 (not drawn at all) to 1 (fully drawn). In your rendering loop, you'd increase p, until it gets to 1.

var p = 0; // Percentage

function animate() {
    if (p < 1.00)  // while we didn't fully draw the line
        p += 0.01; // increase the "progress" of the animation

    graphics.clear();
    graphics.lineStyle(20, 0x33FF00);
    graphics.moveTo(30,30);
    // This is the length of the line. For the x-position, that's 600-30 pixels - so your line was 570 pixels long.
    // Multiply that by p, making it longer and longer. Finally, it's offset by the 30 pixels from your moveTo above. So, when p is 0, the line moves to 30 (not drawn at all), and when p is 1, the line moves to 600 (where it was for you). For y, it's the same, but with your y values.
    graphics.lineTo(30 + (600 - 30)*p, 30 + (300 - 30)*p);


    renderer.render(stage);
    requestAnimationFrame( animate );
}