CODEWITHSUNDEEP
javascriptanimationpixi.js
daveycroqet
daveycroqet

Reputation: 2727

Animate the drawing of a line in Pixi.js

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

I completely 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 );
}

Upvotes: 6

Views: 4816

Answers (1)

Aaa
Aaa

Reputation: 624

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 );
}

Upvotes: 6

Related Questions