在 Pixi.js 中绘制线条动画

Question

是否可以在 Pixi.js 中为线条绘制动画？（画布、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 );
}

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