Нарисуйте линию с 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 (х, у) и MoveTo (х, у) в графической форме? Я думал, что могу перерисовывать каждый раз, когда я двигаю линию, и уничтожаю старую, но я надеюсь, что есть более простой способ сделать это.

Приветствия, 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(); 

Play с jsFiddle и дайте мне знать, если это то, что вы искали.

T