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

【问题标题】：Animate the drawing of a line in Pixi.js在 Pixi.js 中绘制一条线的动画
【发布时间】：2016-03-06 01:07:51
【问题描述】：

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

【问题讨论】：

标签： javascript animation pixi.js

【解决方案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 );
}

【讨论】：