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

Animate the drawing of a line in Pixi.js

本文关键字：动画 一条 绘制 Pixi js      更新时间：2023-09-26

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

你需要自己制作动画——先把它画短，然后把它画得越来越长。

例如，在这里我添加了一个变量"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 );
}
相关文章：