POPSブログ

CreateJS MotionGuidePlugin 利用してサムネール等を、パスに沿ってMotionTweenする

242

  Category:  javascript2013/08/18 pops 

今まではテキストが主でしたが、サムネール、ボタン等を、MotionGuidePlugin 利用してパスに沿ってMotionTweenさせます。「テキスト」と違い効果の無い場合も有りますので、3種類の違ったタイプで動きなどを確認して見ます。
easeljs-0.7 でのテストです。

 

CreateJS MotionGuidePlugin 利用して、アニメーションを作る一例


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


原則、シミュレーションで「パスデータ」を取得した場合の組み込みの例です。
取得「パスデータ」を使用した、簡単なサムネール等のアニメーションの例ですが、「テキスト」と違い、注意すべき事がある。以下、メニューボタン、サムネール、小画像、Shape(グラフィック)、などを動かすことを前提としたものです


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

【参照】当方の記事: CreateJS MotionGuide利用、テキストアニメーションのシミュレーション


[説明図]

 

1. パスは5種類の中かから選定出来ます。少々ですが動きに違いがあります。(デモ参照)
2. インスタンス形式はRoundRectのみ内包し、X軸、Y軸反転させていませんので簡単な作りです。
(デモでは、円形、ボタン形式の場合の動作が見れます)
3. 文字と違いインスタンスの数が少ないので、出現間隔は長いほうが効果があるようです。
4. 画像をロード出来ない場合の対処方法は、ページ最後 [ 対処方法 ] をご覧下さい。
5. 制作には時間がかかりますので、効果の無い場合は使用を中止したほうが賢明です。


 

DEMO


CreateJS MotionGuidePlugin 利用のサムネール等のアニメーションの例 (createJS031.js)
デモは簡単なシミュレーション形式です。

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


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.0 使用)


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box" class="radius"><canvas id="mainCanvas" width="640" height="300"></canvas></div>
</div>

JS

createJS031.js、JS名は任意に変更可。easeljs-0.7用 (デモのJSを簡略化しています)


//日本語
//createJS031.js
//簡易MotionGuideサムネール用
//easeljs-0.7用

//------------------------------------------------------

//初期設定

//ガイド幅
var guide_w=300;
//ガイド高さ
var guide_h=-200;

//コンテナ高さ
var contna_H=150;

//ポイント固定=0 移動=1 中央=2 画面ランダム=3 画面指定位置=4 ランダム選定=5
//ランダム選定は 0-4 が自動で選定される
var pointType=0;

//画面指定位置=4の場合のステージ内位置
var stagePoint_x=550;
var stagePoint_y=10;

//拡大移動、アニメ速度 2000-3000
var speed=2000;
//出現間隔の基準時間 200-800
var base_time=400;
//交互遅延時間 500-1000
var delayed_time=1000;

//パスの種類指定 0-4
var pathdata=0;

//スケールのデータ、ランダムに使用
var sclsdata=[0,0,0,0,0,0,1,2,3];

//サムネール配置の余白
var thumb_spc=15;

//---------------

//ベースcanvasサイズ
var canvasWidth=640;
var canvasHeight=300;

//ロード画像の大きさ(サムネール)
//RoundRect
var thumbW=100;
var thumbH=100;
var margin=4;//中の余白
var thumbRadius=5;//角丸半径

//画像manifestリスト
var manifest=[
{src:"/main/images/testImage101.jpg",id:"PHOTO"},
{src:"/main/images/testImage102.jpg",id:"PHOTO"},
{src:"/main/images/testImage103.jpg",id:"PHOTO"},
{src:"/main/images/testImage104.jpg",id:"PHOTO"},
{src:"/main/images/testImage105.jpg",id:"PHOTO"}
];

//------------------------------------------------------

//最初の画像0のこと/未使用
var image_no=0;
//画像数
var image_max;

//Plugin読み込み
createjs.MotionGuidePlugin.install();

//ステージ
var stage;
//Loader
var loader;
//コンテナ
var thumbboxcontainer;
var loadingcontainer;
var progresscontainer;
//画像result
var welcomeImage;
//Loading
var loadingShape;
//TEXT
var viewtext;

//読み込み画像result保存容器
var assets=[];

//変数
var globalflag=false;
//loading変数
var loading=false;
//ProgressBar
var progressbar;
var progtext;
var bar_v=0;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

//配列など
//Thumbボタンインスタンス
var myThumb=[];
//配置ポジション保存
var setPosx=[];
var setPosy=[];
//MOVEポジション保存
var movePosx=[];
var movePosy=[];
var thumbcount;//グローバル

//------------------------------------------------------

//ステージ周りセット
function init() {

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver設定/必要に応じ設定
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	var backrect=new createjs.Shape();
	backrect.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//welcome画像層画像表示 640x300画像を用意する
	welcomeImage=new createjs.Bitmap('/main/images/welcome_black_w.png');
	stage.addChild(welcomeImage);
	//welcome画像を先に表示

	stage.update();

	//thumbboxcontainerコンテナ
	thumbboxcontainer=new createjs.Container(0,0,canvasWidth,canvasHeight);
	thumbboxcontainer.x=(20+Math.floor(thumbH/2));//あとで補正
	thumbboxcontainer.y=contna_H;//250-260
	//コンテナをステージにaddChild
	stage.addChild(thumbboxcontainer);

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		if(loading) {
			loadingShape.rotation +=5;
			stage.update();
		}
	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定

	stage.update();

	//ProgressBar
	progresscontainer=new createjs.Container();
	progressbar=new createjs.Shape();
	progtext=new createjs.Text("0","12px Arial","#FFFFFF");
	progtext.x=0;
	progtext.y=15;
	progtext.maxWidth=80;
	progtext.textAlign="center";
	progtext.shadow=shadow;//shadow
	//alpha
	progressbar.alpha=0.5;

	//bar_v判定tickを設定 butt round/Stroke
	//90度是正-Math.PI/2
	progressbar.tick=function (){
		if(bar_v > 0) {
			progressbar.graphics.clear();
			progressbar.graphics.setStrokeStyle(8,"butt").beginStroke("#FF69B4");
			progressbar.graphics.arc(0,0,40,-Math.PI/2,Math.PI*2*bar_v-Math.PI/2);
			progtext.text=Math.floor(bar_v*100);
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);
	set_text("Loading Now!");

	stage.update();

	//画像ロードに進む
	bulkload();
}

//progressBar
function progress(event) {

	//loadedのみ効く
	bar_v=event.loaded;
}

//bulk-load、画像一括ロード
function bulkload() {

	//Loaderを作る
	loader=new createjs.LoadQueue(false);
	//全体、progressがあれば先に設定
	loader.addEventListener("progress",progress);

	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;
	//画像選別
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);
	}
}
//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//簡易TEXT
	set_text("Loading End!")
	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape.tick);
	//非表示でも良い
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	stage.update();

	//サムネールをつくる
	for (var i=0; i < image_max; i++) {

		//Bitmap RoundRectbox
		//画像 x y 画像幅 画像高さ 角丸半径 余白 番号
		myThumb[i]=createThumbBox(assets[i],0,0,thumbW,thumbH,thumbRadius,margin,i);

		//配置データを得る
		setPosx[i]=(thumbW+thumb_spc)*i+Math.floor(thumbW/2);
		setPosy[i]=0;
		//仮配置
		myThumb[i].x=0;
		myThumb[i].y=0;
		//判別用のproperty:idを書き込む
		myThumb[i].id=i;
		//非表示
		myThumb[i].visible=false;

		//サムネールクリックアクション
		myThumb[i].addEventListener("click",handleclick);

		//addChild
		thumbboxcontainer.addChild(myThumb[i]);

	}

	//サムネールコンテナ中央補正
	var thumbAll_w=(thumbW+thumb_spc)*image_max-thumb_spc;
	thumbboxcontainer.x=(canvasWidth-thumbAll_w)/2;

	stage.update();

	//画像があれば
	if (image_max) {

		//早すぎるので調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			event.target.removeEventListener("progress",progress);
			//progressTicker削除
			createjs.Ticker.removeEventListener('tick',progressbar.tick);
			//progress非表示
			progresscontainer.visible=false;

			//簡易TEXTクリア
			set_text("");
			//viewtext.visible=false;
			stage.update();

			//プロローグ
			set_prologue();

		},2000);
	}
}

//プロローグ
function set_prologue() {

	//Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//THUMBアニメ
	set_thumbanime();
}

//THUMBアニメ、ガイド使用
function set_thumbanime() {

	set_text("");
	thumbcount=0;//グローバル

	//パターン番号
	var pattern_no=Math.floor(Math.random()*5);
	//パターン番号 ポイント固定=0 移動=1 中央=2 画面ランダム=3 ステージ内指定位置=4 ランダム指定=5
	var pointtype_no=pointType;
	if (pointType == 5) {
		//ランダム指定
		pointtype_no=pattern_no;
	}

	//delay容器
	var delay_st=[];
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	var chgflag3=Math.floor(Math.random()*3);//ガイド用

	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;

	//スケール
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];

	//delay番号
	var delay_no=Math.floor(Math.random()*4);

	//サムネール幅正確ではない
	var thumbAll_w=(thumbW+thumb_spc)*image_max-thumb_spc;

	//alphaの調整
	var alpha_no=0;
	if (scls < 0.2) {alpha_no=1;}

	var sh=image_max-1;
	var k=0;
	var flag=-1;

	for (var i=0; i < image_max; i++) {

		//ポイント固定
		if (pointtype_no == 0) {
			myThumb[i].x=guide_w;
			myThumb[i].y=guide_h;
		}
		//ポイント移動
		if (pointtype_no == 1) {
			myThumb[i].x=guide_w+setPosx[i];
			myThumb[i].y=guide_h;
		}
		//強制中央に修正
		if (pointtype_no == 2) {
			myThumb[i].x=thumbAll_w/2;
			myThumb[i].y=0;
		}
		//画面ランダム
		if (pointtype_no == 3) {
			//globalToLocal
			var point=thumbboxcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			myThumb[i].x=point.x;
			myThumb[i].y=point.y;
		}
		//ステージ内指定位置
		if (pointtype_no == 4) {
			//globalToLocal
			var point=thumbboxcontainer.globalToLocal(stagePoint_x,stagePoint_y);
			myThumb[i].x=point.x;
			myThumb[i].y=point.y;
		}

		//MOVEポジション保存
		movePosx[i]=myThumb[i].x;
		movePosy[i]=myThumb[i].y;

		//セット
		myThumb[i].rotation=rotate_no;
		myThumb[i].alpha=alpha_no;//調整
		myThumb[i].scaleX=scls;
		myThumb[i].scaleY=scls;

		//共通delay
		delay_st[i]=base_time*i;//標準

		if (delay_no == 0) {delay_st[i]=base_time*(sh-i);}//逆順
		if (delay_no == 1) {delay_st[i]=Math.abs(i-sh/2)*base_time;}//中から
		if (delay_no == 2) {delay_st[i]=Math.abs(Math.abs(i-sh/2)-image_max/2)*base_time;}//外から

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=delayed_time;}
		}

		k ++;
		flag *=-1;
	}

	//delayの最大値を求める
	var max_delay=Math.max.apply(null,delay_st);

	//speed補正
	var speed_v=speed;
	if (pathdata == 4) {speed_v *=1.5;}//時間長く

	var flag=-1;

	//Tween
	for (var i=0; i < image_max; i++) {

		myThumb[i].visible=true;

		var pathdata_v;
		if (pathdata == 0) {pathdata_v=[setPosx[i],setPosy[i], -50+setPosx[i],-100,-100+setPosx[i],0, -100+setPosx[i],200, movePosx[i],movePosy[i]];}//1
		if (pathdata == 1) {pathdata_v=[setPosx[i],setPosy[i], -50+setPosx[i],100,-100+setPosx[i],0, -150+setPosx[i],-150, movePosx[i],movePosy[i]];}//2
		if (pathdata == 2) {pathdata_v=[setPosx[i],setPosy[i], -75+setPosx[i],150,-150+setPosx[i],0, -200+setPosx[i],-150, movePosx[i],movePosy[i]];}//3
		if (pathdata == 3) {pathdata_v=[setPosx[i],setPosy[i],-200+setPosx[i],100,0+setPosx[i],100,250+setPosx[i],75,movePosx[i],movePosy[i]];}//4
		if (pathdata == 4) {pathdata_v=[setPosx[i],setPosy[i], 100+setPosx[i],-135,-50+setPosx[i],-70, -200+setPosx[i],50, 50+setPosx[i],70,250+setPosx[i],50,movePosx[i],movePosy[i]];}//5

		//Tween
		var twn=createjs.Tween.get(myThumb[i]);
		twn.wait(delay_st[i])
		.to({guide:{path:pathdata_v,orient:false,start:1,end:0},rotation:0,scaleX:1,scaleY:1,alpha:1},speed_v)
		//.call(set_shadow)
		.wait(500)
		.to({y:-20*chg_v},200)
		.to({y:0},200)
		.call(function(){
			//終了
			if (thumbcount == image_max-1) {finshthumbAll();}
				thumbcount +=1;//グローバルの事
		});

	}

}

//shadow 未使用
function set_shadow () {

	this.shadow=shadow;
}

//サムネール表示完了
function finshthumbAll() {

	//未処理
}

//サムネールクリックアクション
function handleclick (event) {

	var instance=event.target.parent;
	//何もしない/テキスト表示
	var id=instance.id;
	set_text("番号 "+id);
}

//tickステージ
function tick() {
	stage.update();
}

//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
}

//quadraticCurveTo、こちら使用
function operaRoundRect(s,x,y,w,h,r) {
	s.graphics.moveTo(x+r,y)
	.lineTo(x+w-r,y)
	.quadraticCurveTo(x+w,y,x+w,y+r)
	.lineTo(x+w,y+h-r)
	.quadraticCurveTo(x+w,y+h,x+w-r,y+h)
	.lineTo(x+r,y+h)
	.quadraticCurveTo(x,y+h,x,y+h-r)
	.lineTo(x,y+r)
	.quadraticCurveTo(x,y,x+r,y);
}

//create-RoundRectbox陰影処理
function createThumbBox (image,x,y,w,h,r,m,no) {

	//サムネール縮小なしRoundRectBOX
	box=new createjs.Container();
	var thumbimg=new createjs.Bitmap(image);
	thumbimg.x=m;
	thumbimg.y=m;
	//back
	var thumbback=new createjs.Shape();
	thumbback.graphics.s(0).beginFill("#FFFFFF");
	operaRoundRect(thumbback,x,y,w+m*2,h+m*2,4);
	//shadow、現在ここで陰影処理
	thumbback.shadow=shadow;
	box.addChild(thumbback,thumbimg);
	box.regX=(w+m*2)/2;
	box.regY=(h+m*2)/2;

	return box;
}

//簡単なLOADING
function loadingIndicator(){

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round").beginStroke("#CCCCCC");//round

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=10,
	outerR=5,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.moveTo(cx,cy);
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		graphics.lineTo(cx,cy);
	}
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s
}

//START
init();

注釈文を削除すれば、幾分早くなります。登録画像パスは当方の場合です。使用の際は環境に合わせてください。

easeljs-0.7より イベント関連処理が変更になりましたので修正しました。


CSS

createJS031.css、CSS名は任意に変更可


/*日本語 createJS031.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#FFFFFF;
}

#image-box #mainCanvas {
border-radius:10px;
}
canvas {
border-style:none;
background-color:transparent;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

当方のサンプルの例です。


簡単な説明


[説明図]


 

1個のインスタンスでは無く、複数のインスタンスに MotionGuide を設定するために工夫が必要になります。
説明が「難解」ですが、図と合わせて「テキトウ」に理解下さい。


ガイドパス利用の概略

最大の利点はTweenで簡単に曲線に沿ってインスタンスを動かせることです。

1. パスは標準のパス(シミュレーションの)の最終ポイントをずらしただけの簡単なものです(x=300,y=-200)。
図の様な5種類の形を組み込んでありますので指定可能です。
2次ベジェ曲線ですから、それなりの動きになります。固定の場合はパス波形が変わりますので予期せぬ動きになる。(中央指定、ランダム指定、指定位置、では動きが違う)
2. アニメする場合の速度などの条件で、雰囲気が変わりますので適度に調整します。(動かす要素も少ないので、時間は長めのほうがよいようだ)
3. パス情報を書き込み、インスタンス位置の情報を加算するだけですが、X軸、Y軸反転させていません。(改造の場合はテキストアニメーションのページなどを参照下さい)
4. アニメは IN のみです、同じパスデータにして、start end の変更で OUT も簡単に出来ます。
5. インスタンス個別にはパスに沿って動いていますが、全体でみればパスの形と同形に成るとは限りません。
6. 特殊な用途の為余り必要とはしないものと思われます。使用する場合は目的に合った「デザイン」などがポイントでしょう。(TOPページのメニュー、特別なページへの分岐とか、、)
7. 設定などはJS上部をご覧下さい。


これは簡単な動作のサンプルです

このJSは、簡単な動作のサンプルですから未完成の形になります。本格的に利用するならば、目的に合わせて修正、加筆しなければなりません。デモのJSと比較して必要でないものは削除しています。

少しは工夫したツモリですが、納得行くものではないので興味のある方は良いものを考案下さい。


ポイント固定とポイント移動

ポイント固定とポイント移動では動きが違いますのでデモでの実際の動きを認識下さい。

1. ガイドパスは原点 00 です。そのためにインスタンスの配置間隔で「ポイント移動」させることにより同じパスの波形になり、同じ動きになりますが、右側インスタンスのアクションが画面外で行われます。(見えない)
2. 一方「ポイント固定」は最後のポイントが同じ所になり、相対的に「2次ベジェ曲線」の制御ポイントが動くので、パスの波形が変わり違った動きをします。(「2次ベジェ曲線」の特性上余りきれいな曲線では有りませんが)
3. 文字と違い、動きが大きい方が効果があるようです。但し拡大、フエードの場合は効果が半減します。
4. 特に「陰影処理」されたインスタンスを「フエード」すると「陰影処理」の特性のため「黒く」なります。(MotionGuideアクションが終了してから陰影処理する方法もある)


出現位置の「中央指定」「ランダム指定」「指定位置」と「ポイント固定」

出現位置の、中央指定、ランダム指定、指定位置、では動きが違います。ガイドパス形状によっても違いますし、実際に動かしてみないと判りません。変化をつけたい場合は重要ですが、事前に動きが判らないのが難点だ。

1. 中央指定は、画面中央ではなく、インスタンス並び(コンテナ)の中央位置です。
2. ランダム指定は、画面全体(ステージ)でのランダム位置です。
3. 指定位置は、画面内(ステージ)での位置です。
4. ポイント固定は、ほぼインスタンス並び(コンテナ)原点からの指定位置になります。

「イイカゲン」「テキトウ」「風任せ」が重要だ!。


登録ガイドパスの使用と変更

下記の様なデータになっています。1-4番は「2次ベジェ曲線」2つの組み合わせ、5番は「2次ベジェ曲線」3つの組み合わせです。5番使用の場合はTween時間を長くしてください(JSでは1.5倍になるようにした)
JSの設定、「パスの種類指定」でガイドパスを指定出来ます。



path:[0,0, -50,-100,-101,0, -100,200,300,-200]
path:[0,0, -50,100,-100,0, -150,-150,300,-200]
path:[0,0, -75,150,-150,0, -200,-150,300,-200]
path:[0,0, -200,100,0,100, 250,75,300,-200]
path:[0,0, 100,-135,-50,-70, -200,50, 50,70,250,50,300,-200]

当然、他に作ったパスデータにしても構いません。効果のあるパスの形などは不明ですから大変だ!。


実際のガイドパスの組み込み

実際のガイドパスの組み込んで見ます。ガイドパスの1番目を組み込むと下の記述と同じになります。これはインスタンス原点に向かう IN タイプになります。
ガイドパスは、原点、00 より右に向かって描写されていますので、start:1,end:0 で、原点、00 に向かいます。start:0,end:1 では反対向き(OUT)になります。

setPosx[i] setPosy[i]は、インスタンスの位置データですから、ガイドパス位置をインスタンスに合わせるため、x値 を加算して補正しています。(setPosy[i] y位置 は 0 です)

movePosx[i] movePosy[i]]は、移動した位置情報ですから、[setPosx[i] setPosy[i]に向かって動くことになります。


「移動した位置」情報と「ガイドパス終端位置」情報が違えば動きも変わります。「ポイント固定」は、これを逆に利用している訳です。(よって動きの予測が付かない、イイカゲンが良い結果を生む)



.to({guide:{path:[setPosx[i],setPosy[i], -50+setPosx[i],-100,-100+setPosx[i],0, -100+setPosx[i],200, movePosx[i],movePosy[i]],orient:false,start:1,end:0},rotation:0,scaleX:1,scaleY:1,alpha:1},speed_v)

無理やり合わせて要るのか?、と問われれば、「そうなのです!」。


時間の設定で効果が違う

Tween時間、出現時間差、交互遅延時間、などで見た目が違いますので「好みで適正」に設定します。
目的に合わない場合は、無理に MotionGuide を使用しないで、普通の Tween にすればよい。


インスタンスの形状と効果

インスタンスの形状で効果が違います。特に円形のものは回転しても判りませんので、角形のインスタンスの方が良いと思います。(実際にデモで円形インスタンスに切り替え、確認すれば判る)
円形のインスタンスでなければ成らない「家庭の事情」がある場合は、中に文字を入れる、または回転している状態がわかる画像デザインにするなどの工夫が必要です。
注意、上記JSは、サムネール縮小なしRoundRectタイプ 100x100 表示のみです。


MotionGuide が終了してからの「陰影処理」

事前の「陰影処理」は削除して、次ぎの様にすれば後で「陰影処理」出来る。



.call(set_shadow)

------------------------------------------------

//shadow 未使用
function set_shadow () {

	this.shadow=shadow;
}

サムネールクリックアクション

サムネールクリックの場合の処理を書きます。現在押されたサムネールのID番号を表示させています。



//サムネールクリックアクション
function handleclick (event) {

	//何もしない/テキスト表示
	var id=event.target.id;
	set_text("番号 "+id);
}

サムネール表示完了後の処理

現在は何もしていませんが、必要なら書き込みます。



//サムネール表示完了
function finshthumbAll() {

	//未処理
}

ランダムに設定されるもの

殆んどの設定については、JS上部で設定の変更が出来ますが、下記のものはランダムに変わります。

1. サムネールの表示順序。
2. 拡大率。(JS上部の配列で変更可能)
3. 交互遅延。(確率33%)

必要であれば変更下さい。


インスタンス個別の動作から全体の動作に変更

インスタンス個別の動作は wait() の値が違うために出現時間に差が有ります。この値を同じにすれば「インスタンス全体」が同じ動きをします。(max_delayは事前に計算されています)
次ぎの例では、個別に MotionGuideTween 後、全体で右または左回転して、回転0に戻ります。TEXTを動かしていた時と方法は同じです。



	//Tween
	var twn=createjs.Tween.get(myThumb[i]);
	twn.wait(delay_st[i])
	.to({guide:{略す},speed_v)
	.wait(500)
	.to({y:-20*chg_v},200)
	.to({y:0},200)
	.wait(max_delay-delay_st[i])//最大値利用時間差吸収
	.wait(1000)
	.to({rotation:360*chg_v},1000)
	.to({rotation:0},1)
	.call(function(){
		略す
	});

これらの修正などは自由です。


大きな画像をロードして縮小サムネールにする

実際は、大きな画像をロードして縮小サムネールにする為のものですが、省略しています。Bitmap()を乗っけているだけですからスケールを替えれば小さく出来ます。下記の様に書き換えます。
追加の imageW imageH (imgw imgh) はロード画像の大きさです。



//ロード画像の大きさ
var imageW=640;
var imageH=300;

//画像 x y 画像幅 画像高さ 角丸半径 ロード画像幅 ロード画像高さ 余白 番号
myThumb[i]=createThumbBox(assets[i],0,0,thumbW,thumbH,thumbRadius,imageW,imageH,margin,i);

---------------------------------------------------------------

//create-RoundRectbox、縮小タイプ
function createThumbBox (image,x,y,w,h,r,m,imgw,imgh,no) {

	//サムネールBOX
	box=new createjs.Container();
	var thumbimg=new createjs.Bitmap(image);
	thumbimg.x=m;
	thumbimg.y=m;
	//縮小
	thumbimg.scaleX=w/imgw;
	thumbimg.scaleY=h/imgh;
	//back
	var thumbback=new createjs.Shape();
	thumbback.graphics.s(0).beginFill("#FFFFFF");
	operaRoundRect(thumbback,x,y,w+m*2,h+m*2,4);
	//shadow
	thumbback.shadow=shadow;
	box.addChild(thumbback,thumbimg);
	box.regX=(w+m*2)/2;
	box.regY=(h+m*2)/2;

	return box;
}

基本的には、小さなサムネール画像を使用します。
上記では、差しさわりのないBitmap()を利用していますが、グラフイックで beginBitmapFill() の中の画像を縮小する場合は Matrix2D Class を利用すれば可能です。


画像をロード出来ない場合の対処方法

大事なリンクを組む場合に、画像をロード出来ないとボタン等を表示出来ませんので、代替の画像など用意しなければなりませんのでこの所が最大のネックとなります。

簡単に対処するには「キャンバス要素」を作りそれを画像の変わりにする事です。グラフイックで装飾出来ますので急場シノギに有効な手段です。


[ 例 ] 赤色 ボックスを描く、大きさ色などは自由です。画像の代用として使用出来ます。


//キャンバス要素
var canvas=document.createElement("canvas");
canvas.width=幅;
canvas.height=高さ;
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,幅,高さ);

//CreateJS Bitmap()化
var bitmap=new createjs.Bitmap(canvas);
--------------------------------------------------

beginBitmapFill()でも利用可能です

...beginBitmapFill(canvas)...

グラフイックで装飾等、詳細は以下ページの「キャンバス要素を画像の代用にする」を参照下さい。


【参照】当方の記事: CreateJS Graphicsクラスの beginBitmapFill() を考える




使用画像

原則、使用目的にあわせて作ります。下記はサンプルで使用の画像です。

背景画像である、Welcome画像は別途用意下さい。ここでは、640x300サイズ

画像1、100x100 画像2、100x100 画像3、100x100 画像4、100x100 画像5、100x100

 

一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。


インスタンスが変わっただけで、テキストと同じです。以下のテキストアニメーション記事を参照下さい。

【参照】当方の記事: CreateJS MotionGuidePlugin 利用して、テキストアニメーションを作る一例です

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

【参照】当方の記事: CreateJS MotionGuide利用、テキストアニメーションのシミュレーション


MotionGuide利用、図形とテキストアニメーション。

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


さほど必要なものでは有りません。以上「イイカゲン」「テキトウ」説明です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]