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

Question

是否可以在 Pixi.js 中为线条的绘制设置动画？ ( Canvas 、WebGL 等等。)

我完全理解如何为已渲染的线条或对象设置动画，但是如何让它为线条本身的绘制设置动画，就像使用 TweenMax 一样？我对示例和代码进行了详尽的搜索，令我震惊的是，我无法找到执行此操作的单一引用点。

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

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