用PIXI画一条线，然后用吐温Max移动它

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值进行动画处理/补间，那么每个line的graphics对象将需要更新，即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，让我知道这是否是你要找的。

T