createjs、X1、Y1及びX2とラインをアニメーション、Y2は
座標、線で接続された2つの円があり、Iはcreatejs.Tween.get(circleOne).to({x: someCoord, y:anotherCoord},1000)によって円位置をアニメーション化することができます。
円の端点を同様の方法で更新して、円がアニメーション化されて移動するときに線の終点が円に固定されるようにします。
行はline.graphics.beginStroke("red").setStrokeStyle(2).moveTo(20,20)で作成されています。
ありがとうございます！
@tyagoの提案よりも良い方法があります：Graphic Commands。 commandを保存して、いつでもGraphicsが使用するコマンドの値を更新できます。
ここで私は2つの円をトゥイーンし、最初のトゥイーンの「更新」イベントでは、円の座標にラインコマンド値を更新します。 http://jsfiddle.net/lannymcnie/2xoL08bx/
例：
var cmd = shape.graphics.lineTo(10,10).command;
cmd.x = 20; // Changes the x of the lineTo command that is stored off.
ます。また、トゥイーン可能なコマンドのプロパティ：コマンドの値が変更されると
createjs.Tween.get(cmd).to({x: 100, y:100}, 1000);
は、彼らが舞台新しい値で次回を描画します更新されます。 EaselJS docsにコマンドとその値の一覧が表示されます。
Lanny、TweenJSで 'command'を使うのは、パフォーマンス面でフレームごとに全く新しいグラフィックス命令を作る方法と比べてどうですか？ –
コストはコード（およびオブジェクトを廃棄する関連GC）の作成に過ぎません。いずれの場合もステージを再描画する必要があります。コマンド・アプローチは、リスト・グラフィック命令のプロパティーを管理しているため、コード・プラクティスだけでなく読みやすくなります。全体を必要とする一連の個別のプロパティーではなく、トゥイーンまたは簡単に変更できる変更された場合に再描画される命令リスト。 – Lanny
さらに、このアプローチを使用して、グラフィックコマンドを 'append（）'で再利用することができます。この例では、各行は2次曲線です。 'qt（）'コマンドは、オレンジ色の線を描画するために再利用され、さらに小さな黒い線が描画されます。 http://jsfiddle.net/lannymcnie/n1du0tew/10/ – Lanny
サークルが移動するたびに、古いグラフィックスの指示をクリアしてTweenJSなしで新しいものを作成する必要があります。キャッシングのメリットが得られないため、これは非常に高額になることに注意してください。
line.graphics.clear();
line.graphics.beginStroke("red").setStrokeStyle(2).moveTo(10,10).lineTo(50, 50);
を使用していることを忘れないでください：あなたが使用する必要があります{x: 50, y: 50}に{x: 10, y: 10}にエンドポイントを変更したい場合は今
：ここ
は座標からライン{x: 20, y: 20}
{x: 40, y: 40}にです移動後に
line.cache(x, y, w, h);を使用することを強くお勧めします。これは、プロセッサが不要にすべてのフレームをその線で描画するのを防ぐためです。
ええ、私はmoveToでライン全体を再描画していました。私はそれを気に入らなかったので、より簡単な解決策を探していました。あなたの答えは、他に何もできないことを確認します。ありがとう！ – codin
代わりにSVGを使用し、これに円のマーカーが付いた行を作成した場合、マーカーはその行とともに自動的に移動します。 –