Javascript 用PIXI画一条线，用TweenMax移动

我看了一个同时使用这个框架的例子（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();

//这就是我创建行的方式
var线性阵列=[]；
对于（变量i=0；i<3；i++）{
var line=new PIXI.Graphics（）；
line.lineStyle（1，0xf3a33f）；
如果（i==0）{
line.moveTo（getRandomInt（0，window.innerWidth），window.innerHeight）；
lineTo（getRandomInt（0，window.innerWidth），0）；
}else如果（i==1）{
moveTo（0，getRandomInt（0，window.innerHeight））；
lineTo（window.innerWidth，getRandomInt（0，window.innerHeight））；
}否则{
line.moveTo（getRandomInt（0，window.innerWidth），window.innerHeight）；
lineTo（window.innerWidth，getRandomInt（0，window.innerHeight））；
}
line.endFill（）；
line.alpha=0；
stage.addChild（行）；
直线排列。推（线）；
}
//这就是我想要的动画
var timeline=新的TimelineMax（{暂停：true}）；
对于（变量i=lineArray.length-1；i>=0；i--）{
线性阵列[i].Beginll（0xf3a33f，1）；
添加（TweenMax.to（lineArray[i]，.05，{alpha:1}），1.25）；
}
timeline.play（）；

是否有方法将线条移动到图形形状的（x，y）和（x，y）位置？ 我原以为每次移动线路时都可以重新绘制，并销毁旧线路，但我希望有一种更简单的方法来做到这一点

干杯， H4mm3R

如果您希望能够在

移动到

和

行到

值之间设置动画，则每个

行

的

图形

对象将需要更新，即

清除（）

然后用通常的

moveTo

和

lineTo

调用重新绘制新值。所有这些都发生在

渲染

函数中，该函数可及时更新画布

另一件事是你需要一种方法来跟踪你的开始和结束价值观。在下面的示例中，我使用了名为

currPoints

和

destPoints

的数组，其代码如下：

JavaScript:

var lineWidth = 2,
    lineColor = 0xf3a33f,
    length = 4,
    currPoints = [],
    destPoints = [],
    lineArray = [],
    duration = 1.4,
    ease = Power4.easeInOut,
    staggerFactor = .06;

function init() {
    initScene();
    initLines();
    animateLines();
    TweenLite.ticker.addEventListener('tick', render);
}

function animateLines() {
    for (var i = 0; i < length; i += 1) {
        TweenMax.fromTo(lineArray[i], duration, {
            alpha: 0
        }, {
            delay: i * staggerFactor,
            alpha: 1,
            repeat: -1,
            yoyo: true,
            repeatDelay: duration * .5,
            ease: ease
        });
        TweenMax.to(currPoints[i].moveTo, duration, {
            delay: i * staggerFactor,
            x: destPoints[i].moveTo.x,
            y: destPoints[i].moveTo.y,
            repeat: -1,
            yoyo: true,
            repeatDelay: duration * .5,
            ease: ease
        });
        TweenMax.to(currPoints[i].lineTo, duration, {
            delay: i * staggerFactor,
            x: destPoints[i].lineTo.x,
            y: destPoints[i].lineTo.y,
            repeat: -1,
            yoyo: true,
            repeatDelay: duration * .5,
            ease: ease
        });
    }
}

function initLines() {
    var line;
    for (var i = 0; i < length; i += 1) {
        line = new PIXI.Graphics().lineStyle(1, 0xf3a33f);
        if (i == 0) {
            currPoints[i] = getPoint(getRandomInt(0, window.innerWidth), window.innerHeight, getRandomInt(0, window.innerWidth), 0);
            destPoints[i] = getPoint(getRandomInt(0, window.innerWidth), window.innerHeight, getRandomInt(0, window.innerWidth), 0);
        } else if (i == 1) {
            currPoints[i] = getPoint(0, getRandomInt(0, window.innerHeight), window.innerWidth, getRandomInt(0, window.innerHeight));
            destPoints[i] = getPoint(0, getRandomInt(0, window.innerHeight), window.innerWidth, getRandomInt(0, window.innerHeight));
        } else {
            currPoints[i] = getPoint(getRandomInt(0, window.innerWidth), window.innerHeight, window.innerWidth, getRandomInt(0, window.innerHeight));
            destPoints[i] = getPoint(getRandomInt(0, window.innerWidth), window.innerHeight, window.innerWidth, getRandomInt(0, window.innerHeight));
        }
        line.moveTo(currPoints[i].moveTo.x, currPoints[i].moveTo.y);
        line.lineTo(currPoints[i].lineTo.x, currPoints[i].lineTo.y);
        main.addChild(line);
        lineArray.push(line);
    }
}

function initScene() {
    renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {
        view: document.querySelector('canvas'),
        antialias: true
    });
    main = new PIXI.Container();
}

function render() {
    renderer.render(main);
    for (var i = 0; i < length; i += 1) {
        lineArray[i].clear();
        lineArray[i].lineStyle(lineWidth, lineColor);
        lineArray[i].moveTo(currPoints[i].moveTo.x, currPoints[i].moveTo.y);
        lineArray[i].lineTo(currPoints[i].lineTo.x, currPoints[i].lineTo.y);
    }
}

function getPoint(xMoveTo, yMoveTo, xLineTo, yLineTo) {
    return {
        moveTo: {
            x: xMoveTo,
            y: yMoveTo
        },
        lineTo: {
            x: xLineTo,
            y: yLineTo
        }
    };
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (1 + max - min) + min);
};

//
init();

var lineWidth=2，
lineColor=0xf3a33f，
长度=4，
currPoints=[]，
destPoints=[]，
线性阵列=[]，
持续时间=1.4，
ease=Power4.easeInOut，
系数=.06；
函数init（）{
初始化场景（）；
initLines（）；
动画线（）；
TweenLite.ticker.addEventListener（'tick'，render）；
}
函数animateLines（）{
对于（变量i=0；i

玩游戏，让我知道这是否是你们要找的

---

太好了！非常感谢。我不希望有人给我所有的想法！又比你强！没问题