用PIXI划线并用TweenMax移动它

Question

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

我有点卡在一个案件。 所以我想要做的是绘制3条线，匹配我的窗口边框。这很好，但在第二步中，我希望这条线不会离开边界。

我有点卡在一个案件。 所以我想要做的是绘制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