POPSブログ

CreateJS MotionGuide利用、テキストアニメーションのシミュレーション

239

  Category:  javascript2013/08/05 pops 

テキストを、CreateJS MotionGuidePlugin に拠るガイドに沿ってTweenさせる機能は便利ですが、パスの形状違いでの動きが直感的に判らないのでシミュレーションして見ます。パスの形状を変化させて、テキストアニメーションの状態を確認出来ます。
easeljs-0.7 でのテストです。

 

CreateJS MotionGuidePlugin に拠るガイドに沿ってTweenのシミュレーション


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/22)


シミュレーションの概略です。ガイドに沿って動くのは判っていても、条件、波形などにより大きな相違が有りますのでその確認の為です。単純なパスなら手書きでも可能ですが、少し螺旋がかった場合には手書きは難しいのでシミュレーション出来れば重宝になります。パス情報を書き出せます。


1. 4種のパス(2次ベジェ曲線)を選定出来ます。ドラッグで動きますのである程度自由な波形に出来ます。
2. 原則、パスは原点 00 より右方向に展開します。
3. パスをガイドにしての動きを再現出来ます。
4. 実際のテキストアニメーションを表示出来ます。(テキストの分解は当方のやり方であり、動かす条件次第では違った形にみえる場合もあります)
5. パス情報を書き出します(手動)。コピーして使用出来ます。
6. キャンバスが大きいので負荷が大きい。なるべくマシン環境の良いもので操作下さい。


 

DEMO (シミュレーション)


CreateJS MotionGuide利用、テキストアニメーションのシミュレーション

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


Chrome Firefox Safari(Win) IE9、で動作確認済み。 (Safari(Mac)、IE10は未確認です)


 

簡単な活用の説明


シミュレーションとは言いますが、自分でパス情報を得るために作ったものを少し加工したものです。
パス情報が得られますので、それを加工して使用します。利用方法は MotionGuidePlugin のマニュアル規定によります。ワタシは MotionGuide に詳しく(完全に正確では)は有りませんが、「前ページ」記事を参照ください。


次ぎのパス情報を取得したと仮定します。(サインカーブの様なパスの形)

初期のシミュレーション場面(上図左)で「データ取得」すると下のテキストが得られる。動きは「Guide-OUT」「Guide-IN」ボタンを押した時とほぼ同じです。



path:[0,0, 100,-150,200,0, 300,150,400,0]

インスタンスの位置、0,0 より400ピクセル離れた、400,0 地点までサインカーブの様に右に動き、
その後、元の位置に戻ります。0,0 よりパスが描かれていますので、start:0,end:1、が初期の start end 値です。
逆方向には、データをそのままにして、start:1,end:0、で戻りますので、ここが便利なところです。
orient:falseですから、rotation で回転を与え制御できます。1回転して、帰りも1回転します。



仮にインスタンス testChip が存在するとします

//rotationを0にする
testChip.rotation=0;

//Tweenの設定と実行
var tween=createjs.Tween.get(testChip)
.wait(500)
.to({guide:{path:[0,0, 100,-150,200,0, 300,150,400,0],start:0,end:1,orient:false},rotation:360},2000)
.wait(1000)
.to({guide:{path:[0,0, 100,-150,200,0, 300,150,400,0],start:1,end:0,orient:false},rotation:0},2000)
.call(function(){
	//必要なら事後処理
});

各「操作ポイント」を「ドラッグ」して形を作りますが、正確な数値にあわせるのが困難な場合(0にあわせたいが旨くゆかない、、)、取得データの数値を直接変えても、+ -3ピクセル位ならば、動きに狂いは有りません。


実際に組み込むには、初期位置、最終位置に修正の加算など必要になりますが、ここでは説明は省略します。


上記は一例ですが、現在資料など少ないですから、自分でテストして調べるほか余り方法は有りません。時間の経過と共に資料は増えてくるものと思います。知ってる方は積極的に情報を発信下さい。


テキストアニメーションは、以下の記事を参照下さい。

【参照】当方の記事: CreateJS 図形テキストをアニメーション、Tween 連続操作と MotionGuideTween の組み合わせ

【参照】当方の記事: CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色)

【参照】当方の記事: CreateJS 図形を円周に配置した、サークルアニメーション、Tweenをwait()で連続操作する(虹色)


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]