Createjs und easlejs - animiere eine Linie mit mehreren Punkten

Question

Ich möchte eine Linie tweenen, die mehr als zwei Punkte hat. Ein Beispiel für zwei Punkte sind hier zu finden - https://jsfiddle.net/gskinner/17Lk8a9s/1/

Allerdings habe ich ein Array von Pfaden

 var path = [0,0,0,100,200,200]; 

Wie kann ich diese Linie tweenen nach dem Array mit CreateJS/tweenJS?

Answer 1

Sie müssen nur jeden Punkt separat animieren.

Hier ist ein schnelles Beispiel: http://jsfiddle.net/lannymcnie/zd1amd3k/

Es hat nur einen for-Schleife jeden Punkt einzeln zu animieren:

for (var i=0, l=pathStart.length; i<l; i+=2) { 
    var cmd = shape.commands[i] = (i == 0) 
    ? g.moveTo(pathStart[i], pathStart[i+1]).command 
    : g.lineTo(pathStart[i], pathStart[i+1]).command; 

    var duration = Math.random() * 2000 + 1000; 

    createjs.Tween.get(cmd, {loop:true}) 
    .to({x:pathEnd[i], y:pathEnd[i+1]}, duration, createjs.Ease.quadIn) 
    .to({x:pathStart[i], y:pathStart[i+1]}, duration, createjs.Ease.quadOut); 
} 

Hoffnung, das hilft.