用PIXI画一条线，用TweenMax移动

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每个对象line都需要更新，即clear();，然后用通常的重画moveTo，并lineTo用新值调用。所有这些都发生在render可以及时更新画布的功能中。

另一件事是，你需要一种方法来保持你的轨道开始和结束的值。我已经通过名称使出阵列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();

玩jsFiddle，让我知道这是否是您想要的。

Ť