2017-09-22 6 views
0

私はeasel.jsのキャンバスでアニメーション化している接続線で一連の点を持っています。ドットは動き回り、ラインは移動しながらそれらに接続されたままです。ドットが動くにつれて、私は色をアニメーション化しているので、色をアニメーション化するようにしたい。easeljs canvasの線の色をトゥイーンする方法

私はライン上でカラートゥイーンを呼び出そうとしましたが、最初にラインをキャッシュする必要があります。

円の場合、半径を取得します。登録が中央にあるため、x座標とy座標、幅と高さは簡単に計算できます(r = 100の円の場合は50,50そのキャッシュはcache(0,0,100,100)になりますが、行の開始位置、終了位置、長さが常に変化しているため、行の場合、キャッシュ文の正しい座標を参照する方法がわかりません。

easeljsプラグインを使用してgreensockのtimelinemax/tweenliteを使用して、すべてのアニメーションを処理しています(参考になる場合)

答えて

0

TweenLiteは色トゥイーンを扱う場合、あなたは自分のラインの「スタイル」をいつでも更新することができる必要があります:あなたはEaselJSを使用している場合

var shape = new createjs.Shape(); 
var colorCommand = shape.graphics.beginStroke("#000000").command; 
shape.graphics.moveTo(0,0).lineTo(100,100); // Draw the line 
// Any time 
colorCommand.style = "#ff0000"; 
// So in a tween: 
TweenLite.to(colorCommand, 20, {style:"#00ffff"}); 

、あなたもColorPluginを持っているTweenJSを、使用することができます。同様のコード使用:ここで

createjs.Tween.get(colorCommand).to({style:"#00fffff"}, 20000); 

、私はTweenJS https://jsfiddle.net/lannymcnie/5zxpb944/

乾杯と線の色をトゥイーン作っフィドルです。

関連する問題