Question

我看了一个使用这个框架（PIXIjs和GSAP）的例子。所以我想用它

我有点卡在案件上。所以我想做的是画出与我的窗口边界相匹配的3行。那很好，但是第二步，我希望这条线在不离开边界的情况下移动。

这是我这部分的小代码

// This is how I create the line
    var lineArray = [];

    for (var i = 0; i < 3; i++) {

        var line = new PIXI.Graphics();
        line.lineStyle(1, 0xf3a33f);

        if(i == 0) {
            line.moveTo(getRandomInt(0, window.innerWidth), window.innerHeight);
            line.lineTo(getRandomInt(0, window.innerWidth), 0);
        } else if(i == 1) {
            line.moveTo(0, getRandomInt(0, window.innerHeight));
            line.lineTo(window.innerWidth, getRandomInt(0, window.innerHeight));
        } else {
            line.moveTo(getRandomInt(0, window.innerWidth), window.innerHeight);
            line.lineTo(window.innerWidth, getRandomInt(0, window.innerHeight));
        }

        line.endFill();
        line.alpha = 0;

        stage.addChild(line);
        lineArray.push(line);

    }

// And this is how I want to animate it

var timeline = new TimelineMax({ paused: true });
for (var i = lineArray.length - 1; i >= 0; i--) {
    lineArray[i].beginFill(0xf3a33f, 1);
    timeline.add(TweenMax.to( lineArray[i], .05, {alpha: 1}), 1.25);
}
timeline.play();

有没有办法移动图形形状的lineTo（x，y）和moveTo（x，y）？我想我每次移动线都可以重绘，并摧毁旧线，但我希望有更简单的方法来做到这一点。

干杯， H4mm3R

Answer 1

如果您希望动画/补间 moveTo和lineTo值，那么每个graphics的{{1}}对象都需要更新ie line，然后使用新值重新调整clear();和moveTo次调用。所有这些都发生在lineTo函数中，可以及时更新画布。

另一件事是您需要一种方法来跟踪开始和结束值。我在下面的示例中使用了名为render和currPoints的数组，代码如下：

<强> JavaScript的：

destPoints

使用jsFiddle进行游戏，并告诉我这是否是您要找的内容。

Ť

用PIXI画一条线并用TweenMax

1 个答案: