javascript - 用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 调用重绘新的值(value)观。所有这些都发生在 render 函数中，它会及时更新您的 Canvas 。

另一件事是您需要一种方法来跟踪您的开始 和结束 值。我在下面的示例中使用了名为 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如果这就是您要找的，请告诉我。

T