Question

是否可以在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 );
}

Answer 1

你需要自己做动画 - 首先画短，然后再做更长的动画。

例如，在这里我添加了一个变量＆＃34; p＆＃34; （百分比），从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 );
}

在Pixi.js中绘制线条的动画

1 个答案: