javascript - 在 Pixi.js 中动画绘制一条线

在 Pixi.js 中可以制作一条线的绘制动画吗？（Canvas、WebGL，随便哪种。）

我完全理解如何为已经渲染的线条或对象制作动画，但如何让它像使用 TweenMax 一样动画化线条本身的绘制呢？我已经彻底搜索过示例和代码，令人震惊的是，我竟然找不到任何关于如何做到这一点的参考资料。

小提琴。

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

答案＃1

你需要自己做动画——先画短的，然后再越来越长。

例如，这里我添加了一个变量“p”（表示百分比），其值从0（完全未绘制）到1（完全绘制）。在你的渲染循环中，你会增加p，直到它达到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 );
}