POPSブログ

CreateJS 画像分割アニメーションのテスト、タイマー形式

206

  Category:  javascript2013/03/07 pops 

CreateJSを利用して、HTML5のCanvasで画像を分割してアニメーションさせます。ほぼ、Flashと同等に動作します。
回転させることが出来るのが強みですし、透過も幾分軽い(IEのアルファフィルターを考慮する必要が無いだけ負担がへる)。画像も拡大縮小しますからCanvas描画の方が従来より軽く動作するようです。

 

CreateJS 画像分割アニメーションのテスト


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


基本的には、AS3、jQuery、で制作した「slice-photo」などをHTML5のCanvas仕様に書き換えたものです。ライブラリとしてCreateJSを利用しました。
CreateJSでの正式なBitmap化処理では有りませんが、toDataURL()を利用しない方法で処理しました。


制作に当たり、下記の記事を参考にさせて戴きました。毎度オオキニ!。

【参考】clockmaker.jp: HTML5 Canvasを始めよう:EaselJSとTweenJSでテキストエフェクト

【参考】fumiononaka.com: PreloadJSで外部画像ファイルの読込みを待つ

【参考】yoheim.net: [CreateJS] Graphicsクラスを使って四角や丸を画像なしで描画する


DEMO



角丸陰影CSS3、通常の画像処理より軽い、透過しても軽い、長い時間のアニメもOK、回転が出来る、拡大縮小が出来る、HTML5 Canvas処理、マア結構いける!

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。


Chrome Firefox(Win) Safari IE9、で動作確認済み。 (Firefox(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

createJS003.js、JS名は任意に変更可


//日本語
//createJS003.js
//easeljs-0.7用

//------------------------------------------------------
//初期設定

var split_free=true;//自動分割 true false

var speed=1200;//拡大移動、アニメ速度
var delay_speed=150;//出現間隔、delay基準時間 100-200

//自動分割でない場合の分割、奇数値が良い
var split_h=11;//標準の横方向分割数
var split_v=5;//標準の縦方向分割数
var split_all=split_h*split_v;

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//タイマーの使用、useであること
var timer_use="use";
//タイマー値 5000-10000
var time=8000;
//文字を表示するかuse
var text_use="use";

//自動分割の場合、free分割データを登録/奇数値が良い
var splitHs=[11,11,11,11,9,9,5,9,15,2,4,2,1,1];
var splitVs=[5,5,5,5,5,4,1,2,1,7,3,2,5,9];
//スケール方向番号データ 0-3
var scales=[0,0,0,0,1,2,3];
//回転データ、余り回転しない、回転は120度x回転データ
var rotates=[0,0,0,0,1,2,3];

//画像リスト
var manifest=[
{src:"/main/images/toyota_car10.jpg",id:"PHOTO1"},
{src:"/main/images/toyota_car11.jpg",id:"PHOTO2"},
{src:"/main/images/toyota_car12.jpg",id:"PHOTO3"},
{src:"/main/images/toyota_car13.jpg",id:"PHOTO4"},
{src:"/main/images/toyota_car15.jpg",id:"PHOTO5"},
{src:"/main/images/toyota_car16.jpg",id:"PHOTO6"}
];

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

//ステージ
var stage;
//コンテナ
var container,backcontainer,loadingcontainer,progresscontainer;
//画像result
var mainImage,backImage,keep_mainImage;
//部品インスタンス
var loadingShape,progressbar,viewtext;

//読み込み画像URL保存容器
var assets=[];
//変数
var globalflag=false,timerID=null,image_max;
var inType=true;
var image_no=0;
var kcount=0;
var once=false;

//分割大きさ位置保存容器
var chip_W=[],chip_H=[];
var chip_pos_X=[],chip_pos_Y=[];
//実際配置位置
var set_pos_X=[],set_pos_Y=[];
//移動配置位置
var mov_pos_X=[],mov_pos_Y=[];
//スライスObject容器
var chip=[];

//loading変数
var loading=false;
//ProgressBar変数
var bar_v=0;

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


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

	//STAGE
	stage=new createjs.Stage('mainCanvas');

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

	//下画像層、空画像コンテナを作る
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);
	
	//上画像層、空コンテナを作る
	container=new createjs.Container();
	container.addChild();
	stage.addChild(container);

	//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表示判定

	//ProgressBar、canvasWidthの幅で描画
	progresscontainer=new createjs.Container();
	progresscontainer.x=0;
	progresscontainer.y=20;
	progressbar=new createjs.Shape();
	progressbar.graphics.s(0).beginFill("#888888").drawRect(0,0,canvasWidth,4);
	//bar_v判定tickを設定
	progressbar.tick=function (){
		if(bar_v > 0) {
			progressbar.graphics.s(0).beginFill("#FFD700").drawRect(0,0,canvasWidth*bar_v,4);
			stage.update();
		}
	}
	//Ticker.addEventListener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.addChild(progressbar);
	stage.addChild(progresscontainer);

	//簡易TEXT
	if(text_use == 'use') {
		viewtext=new createjs.Text("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);
		//簡易TEXT
		set_text("Loading Now!");
	}

	stage.update();

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

}

//progressBar
function progress(event) {

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

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

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

	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);

	//Manifestを使用、Load開始
	loader.loadManifest(manifest);

}

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

	//エラー無しの画像をassets容器に保存
	assets.push(event.result);
}

//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//簡易TEXT
	set_text("Loading End!")

	//loader Listener削除
	event.target.removeEventListener("fileload",fileload);
	event.target.removeEventListener("complete",complete);

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

	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;

			//画像表示に進む
			draw();

		},1000);//500-3000
	}
}

//DRAW、アニメ
function draw() {

	globalflag=false;

	//IN OUTを確率で決定
	inType=true;
	var in_no=Math.floor(Math.random()*2);
	if (in_no == 0) {inType=false;}

	//最初の画像はIN
	if (!once) {
		inType=true;
		once=true;
	}

	//INの場合画像result取得
	if (inType) {
		mainImage=assets[image_no];
	} else {
		//OUTの場合画像keep.result取得
		mainImage=keep_mainImage;
	}
	//グラフィックに流し込む場合result
	keep_mainImage=assets[image_no];

	//カウントクリア
	kcount=0;

	//分割変更
	if (split_free) {
		splitNo=Math.floor(Math.random()*splitHs.length);
		//分割値代入
		split_h=splitHs[splitNo];
		split_v=splitVs[splitNo];
	}

	//スライス寸法データを得る
	slice_set(canvasWidth,canvasHeight,split_h,split_v);
	split_all=split_h*split_v;//分割合計計算

	//画像分割貼り付け
	var srcArr=[];//URL容器
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			var sliceCanvas=document.createElement("canvas");
			//大きさ重要
			sliceCanvas.setAttribute("width",chip_W[k]);
			sliceCanvas.setAttribute("height",chip_H[k]);
			var context=sliceCanvas.getContext("2d");
			//貼り付け
			context.drawImage(mainImage,chip_pos_X[k],chip_pos_Y[k],chip_W[k],chip_H[k],0,0,chip_W[k],chip_H[k]);
			//srcArr[k]=sliceCanvas.toDataURL("image/png");
			srcArr[k]=sliceCanvas;

			k++;
		}
	}

	//アニメ条件設定
	//配列クリア
	var delay_st=[];
	var delay_pt=[];
	//rotation受渡変数配列
	var rotate_v=[];

	//パターンの使用の確率
	var patternflag=true;
	var pattern_u=Math.floor(Math.random()*2);
	if (pattern_u == 0) {patternflag=false;}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*20);
	//多目的判定用
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);

	//多目的判定用3 1-2の値
	var chgflag2=Math.floor(Math.random()*2)+1;
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//delay番号
	var delay_no=Math.floor(Math.random()*10);
	//delayed遅延させる/20%
	var delayed=Math.floor(Math.random()*5);
	//半径、幅の70%で外側配置、半分の時あり
	var radius=Math.floor(canvasWidth*0.7);

	//配置disposition位置番号/加算値
	var disposition_no=Math.floor(Math.random()*8);
	var disposition_X=0;
	var disposition_Y=0;

	//スケール方向番号
	var scale_no = scales[Math.floor(Math.random()*scales.length)];
	var scale_X=0;
	var scale_Y=0;
	//回転データ取得
	var rotate=rotates[Math.floor(Math.random()*rotates.length)];

	//透明度
	var alpha_no=Math.floor(Math.random()*2);
	//速度補正係数
	var spd_v=1;

	//radius半径補正、20% 円形の内部位置になる/強制透過
	if (chgxyflag == 0) {radius *=0.5;alpha_no=0;}

	//Even算出
	var even_v = 1;
	if (split_v % 2 != 0) {even_v = 0;}

	//Bitmap配置、配置条件設定
	var v_x=0;
	var v_y=0;
	flag3=1;
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//Bitmap配列に保存
			chip[k]=new createjs.Bitmap(srcArr[k]);

			chip[k].width=chip_W[k];
			chip[k].height=chip_H[k];

			//中央補正
			chip[k].regX=chip_W[k]/2;
			chip[k].regY=chip_H[k]/2;

			//戻り位置計算
			set_pos_X[k]=chip_pos_X[k]+chip_W[k]/2;
    			set_pos_Y[k]=chip_pos_Y[k]+chip_H[k]/2;

			//移動加算値等の計算
			//その場所で
			if (disposition_no == 0) {
				disposition_X=set_pos_X[k];
				disposition_Y=set_pos_Y[k];
				//スケール補正
				scale_no=0;
				spd_v=0.5;
				//スケール例外その場拡大20%
				if (chgxyflag == 2) {scale_no=4;}
			}
			//外側に、radius半径補正あり
			if (disposition_no == 1) {
				var angle=Math.random()*360;
				disposition_X=Math.cos(angle)*radius+(canvasWidth/2);
				disposition_Y=Math.sin(angle)*radius+(canvasHeight/2);
				spd_v=1.5;
			}
			//左右に中心から補正
			if (disposition_no == 2 ) {
				v_x=(canvasWidth/2+chip_W[k]/2)*chg_v;
				disposition_Y=set_pos_Y[k];
				if (!chgflag && i % 2 != 0) {v_x *=-1;}
				if (chgxyflag < 2) {v_x *=flag3;}
				disposition_X=v_x+canvasWidth/2;
				//回転は見出し補正
				if(rotate > 0) {alpha_no=0;}
			}
			//上下に中心から補正
			if (disposition_no == 3) {
				disposition_X=set_pos_X[k];
				v_y=(canvasHeight/2+chip_H[k]/2)*chg_v;
				if (!chgflag && j % 2 != 0) {v_y *=-1;}
				if (chgxyflag < 2) {v_y *=flag3;}
				disposition_Y=v_y+canvasHeight/2;
				//回転は見出し補正
				if(rotate > 0) {alpha_no=0;}
			}
			if (disposition_no == 4) {
				disposition_X=canvasWidth/2;
				disposition_Y=canvasHeight/2;
				if (!chgflag) {disposition_X=set_pos_X[k];}
				//スケール補正
				scale_no=0;
				spd_v=0.8;
			}
			//内部2点から
			if (disposition_no == 5) {
				if (flag3 < 0) {disposition_X=canvasWidth/4;}
				else {disposition_X=canvasWidth*3/4;}
				disposition_Y=canvasHeight/2;
				//スケール補正
				scale_no=0;
			}
			//そのほか
			if (disposition_no > 5) {
				disposition_X=set_pos_X[k];
				disposition_Y=set_pos_Y[k];
				//スケール補正
				scale_no=1;
				alpha_no=0;
				spd_v=0.6;
			}

			//スケール方向決定
			if (scale_no == 0) {scale_X=0;scale_Y=0;}
			if (scale_no == 1) {scale_X=1;scale_Y=1;}
			if (scale_no == 2) {scale_X=0;scale_Y=1;}
			if (scale_no == 3) {scale_X=1;scale_Y=0;}
			//スケール例外2倍、負荷が大きい
			if (scale_no == 4) {scale_X=2;scale_Y=2;alpha_no=0;}

			//rotation値の決定 120度x、逆転有り
			rotate_v[k]=rotate*120*chg_v;
			//回転の変化、回転0以外なら交互逆転する、確率33%
			if (chgflag == 1) {rotate_v[k] *= flag3;}

			//初期の移動
			//半径、幅の60%で外側配置
			//IN
			if (inType) {
				mov_pos_X[k]=disposition_X;
				mov_pos_Y[k]=disposition_Y;
				chip[k].x=mov_pos_X[k];
    				chip[k].y=mov_pos_Y[k];
				chip[k].rotation=rotate_v[k];
				chip[k].scaleX=scale_X;
				chip[k].scaleY=scale_Y;
				chip[k].alpha=alpha_no;
			}

			//OUT
			if (!inType) {
				mov_pos_X[k]=disposition_X;
				mov_pos_Y[k]=disposition_Y;
				chip[k].x=set_pos_X[k];
    				chip[k].y=set_pos_Y[k];
				//初期の条件
				chip[k].rotation=0;
				chip[k].scaleX=1;
				chip[k].scaleY=1;
				chip[k].alpha=1;
			}

			//表示リストaddChild、stage.updateはしないこと
			//コンテナに収容
			container.addChild(chip[k]);

			k++;
			flag3 *=-1;
		}
		if (even_v) {flag3 *=-1;}
	}

	//パターンのdelay値計算
	var sh=split_h-1;
	var sv=split_v-1;
	var center_no=split_all/2-1;

	if (patternflag) {
		var k=0;
		var kk=0;
		for (var i=0; i < split_h; i++) {
			for (var j=0; j < split_v; j++) {
				kk = j * split_h + i;
				switch(pattern_no){
					case 0:
						delay_pt[k]=Math.abs(i-(sh/2))+Math.abs(j-(sv/2));
					break;
					case 1:
						delay_pt[k]=k*0.2;
					break;
					case 2:
						delay_pt[k]=Math.abs(i+0.5-sh/2)+j*0.01;
					break;
					case 3:
						delay_pt[k]=Math.abs(i-j*split_h/split_v);
						//delay_pt[k]=Math.abs(i-j);
					break;
					case 4:
						delay_pt[k]=(j+i)/4+2*i;
					break;
					case 5:
						//delay_pt[k]=2;
						//対角早い
						delay_pt[k]=(i+j)*0.2;
					break;
					case 6:
						delay_pt[k]=Math.abs(sv-j)+Math.abs(sh-i);
					break;
					case 7:
						delay_pt[k]= 2+Math.abs(sh-i);
					break;
					case 8:
						delay_pt[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*0.75;
					break;
					case 9:
						delay_pt[k]=Math.abs(i-sh/2)+j*0.01;
					break;
					case 10:
						delay_pt[k]=(split_h*split_v-kk)/2;
					break;
					case 11:
						delay_pt[k]=kk/2;
					break;
					case 12:
						delay_pt[k]=(2+j)+(Math.abs(Math.abs(i-sh/2)-sh));
					break;
					case 13:
						delay_pt[k]=Math.floor(Math.random()*10)+1;
					break;
					case 14:
						delay_pt[k]=Math.abs(k-(split_h*split_v)/2)/2;
					break;
					case 15:
						delay_pt[k]=Math.abs(k/2-j)/2;
					break;
					case 16:
						delay_pt[k]=Math.abs(i-(sh/2))-Math.abs(j-(sv/2));
					break;
					case 17:
						delay_pt[k]=Math.abs(j*split_h/split_v-Math.abs(i-sh));
					break;
					case 18:
						delay_pt[k]=Math.abs(j+Math.abs(i-sh));
					break;
					case 19:
						delay_pt[k]=Math.abs(i+Math.abs(j-sv));
					break;
					case 20:
						delay_pt[k]=2+ Math.abs(sv-j)+(Math.abs(Math.abs(i-sh/2)-sh));
					break;
					default:
						delay_pt[k]=(i+j);
				}

				k ++;
			}

			//delay値補正、環境がよければ小さくできる
			delay_pt[k]*=1;
		}

	}

	//delayの計算
	var flag3=1;
	var kk=0;//方向違いカウント
	var kkk=0;//半分でカウントダウン
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//縦方向にカウント
			kk=i*split_v+j;
			kkk=k;
			if (k > (split_all-1)/2) {kkk=Math.abs(split_all-k)-1;}

			//pattern使用の場合、パターン計算値代入
			if (patternflag) {
				delay_st[k]=delay_pt[k]*delay_speed;
			}
			//patternを使用しない場合
			if (!patternflag) {
				if (delay_no == 0) {
					delay_st[k]=(i+j)*delay_speed;
				}
				//IE対策、本来は(i+j)、一応滑らかになる
				if (delay_no > 0 && delay_no < 5) {
					delay_st[k]=(i+j+k/split_all/4)*delay_speed;
				}
				if (delay_no == 5) {
					delay_st[k]=(i+j)/2;delayed=1;
				}
				if (delay_no == 6) {
					delay_st[k]=kk*delay_speed;
				}
				if (delay_no == 7) {
					delay_st[k]=kkk*delay_speed;
				}
				if (delay_no > 7 ) {
					delay_st[k]=k*delay_speed;
				}

			}

			//分割数が少ない場合早いので、間隔をあける1.5-3
			if (split_all < 16) {delay_st[k] *=2;}

			//delayed遅延
			if (delayed == 1) {
				if (flag3 < 0) {delay_st[k] +=1000;}
			}

			k++;
			flag3 *=-1;

		}
		if (even_v) {flag3 *=-1;}
	}

	//delay反転
	if (chgxyflag > 2) {
		delay_st.reverse();
	}

	//OUTの場合下画像を入れるstage.updateはしないこと/下に移動
	if (!inType) {
		//backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	//Easeの変更 IN最後遅く、OUT等速、全部等速で良いのだが
	//linearを使用、bounceOut cubicIn cubicOut
	var ease=createjs.Ease.linear;
	if (inType) {ease=createjs.Ease.cubicOut;}

	//TWEENの実行
	var k=0;
	var params={};
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {
			if (inType) {
				params={x:set_pos_X[k],y:set_pos_Y[k],scaleX:1,scaleY:1,rotation:0,alpha:1};
			} else {
				params={x:mov_pos_X[k],y:mov_pos_Y[k],scaleX:scale_X,scaleY:scale_Y,rotation:rotate_v[k],alpha:alpha_no};
			}

			var tw=createjs.Tween.get(chip[k])
			.wait(delay_st[k])
			.call(indexchg)
			.to(params,speed*spd_v,ease)
			.call(finshtween);

			k++;

		}
	}

	//OUTの場合下画像を入れる
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}
	//Firefox
	setTimeout(function() {
		//Ticker設定
		createjs.Ticker.setFPS(30);
		createjs.Ticker.addEventListener('tick',tick);
	},20);

}

//重ね順を一番上にする
function indexchg () {
	container.setChildIndex(this,split_all-1);
	//container.setChildIndex(this,0);
}

//要素ごとのアニメ完了処理
function finshtween () {

	//全て完了
	if(kcount == split_all-1){
		finshAll();
	}
	//0からカウント加算
	kcount ++;

}

//アニメ全て完了
function finshAll () {

	//Tween全てが完了してから下画像表示
	if (inType) {
		backImage.image=new createjs.Bitmap(mainImage).image;
	}

	//コンテナの中を削除
	container.removeAllChildren();
	stage.update();

	kcount=0;
	globalflag=true;

	//画像処理に時間がかかるので、少し遅延させる、あったほうが良い
	setTimeout(function() {
		//Ticker削除
		createjs.Ticker.removeEventListener('tick',tick);
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			set_timer();
		}
	},500);
}

//tick
function tick() {
	stage.update();
}

//スライス要素の位置大きさ決定、保存
function slice_set(bw,bh,slh,slv) {
	//スライス
	slice_W=Math.round(bw/slh);//YOKO
	slice_H=Math.round(bh/slv);//TATE
	slice_Wb=bw-slice_W*(slh-1);
	slice_Hb=bh-slice_H*(slv-1);
	var k=0;
	for (var i=0; i < slh; i++) {
		for (var j=0; j < slv; j++) {
			//大きさ保存
			chip_W[k]=slice_W;
			if (i == slh-1) {chip_W[k]=slice_Wb;}
			chip_H[k]=slice_H;
			if (j == slv-1) {chip_H[k]=slice_Hb;}
			//位置保存中央補正前
			chip_pos_X[k]=(slice_W*i);
			chip_pos_Y[k]=(slice_H*j);
			k ++;
		}
	}
}

//次ぎの開く要素を計算
function next_set() {

	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();
}

//タイマー
function set_timer() {

	//タイマー再セット
	if (timer_use == 'use') {

		//一旦切ってからセット
		clearTimeout(timerID);
		timerID=setTimeout(next_set,time);
	}
}

//VIEWTEXT
function set_text(t) {
	if (text_use == 'use') {
		viewtext.text=t;
	}
}

//簡単な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();

注釈文を削除すれば、幾分早くなります。


CSS

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


/*日本語createJS003.css*/

#demo-wrap {
position:relative;
width:auto;
height:320px;
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
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:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}

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

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


簡単な説明


説明図


簡単な説明など

テスト的に制作したものです。完全に画像分割などがアニメーションに合うものでは有りません。

CreateJSを利用して、HTML5のCanvasで画像を分割してアニメーションさせます。ほぼ、Flashと同等に動作します。
回転させることが出来るのが強みです。画像も拡大縮小しますしCanvas描画の方が普通のHTMLより軽く動作するようです。(clockmakerサンによれば、Flashと比較すれば3倍ほど重いようだ、と言う事です)


1. toDataURL()を利用しない方法な為に処理が早い。(変更可能)
2. LoadingをTicker形式に、簡単なProgressBarを付けています。
3. 分割画像を表示する時に重ね順を常に上にしますので、違和感が無くなりました(jQueryの時は出来ませんでした)。尚、ランダムな条件で動作していますので、エフェクトが合わない場合もあります。
4. 角丸陰影はCSS3ですので削除すれば通常の角形になります(若干動作が速くなる)。
5. 寸法などは、CSSで変更ください。伴いJS先頭の設定をも変更ください。JS参照。
6. 原則、ローカルのサーバー環境で動作テスト下さい。


簡単な設定説明

テスト的に制作したものです。動作可能と思いますが、設置は自己責任でお願いします。

1. 画像寸法とCSSの値を合わせてください(大きさ違いの修正処理はしていません)。JSにも大きさの設定があります。画像の登録はJSで行います。
2. 画像は先読みにしました。もし画像が読み込めない場合は除外します。パスは正確に記載し、表示確認ください。
3. JS上部の設定説明を読んでください。
4. 速度、speed は分割されたチップが移動拡大縮小するアニメ時間です。
5. 速度、delay_speed は分割されたチップの出現間隔時間に乗ずる値です。大きければ画像表示終了時間が伸びます。
6. 分割数は登録可能です。チップが正方形に近いほうがキレイです(1枚画像、1x1の登録も可能)。登録せず、自動でランダムに縦横分割することも可能ですが、好きな分割を登録する方法にしています。ただし、正方形分割でキレイになるよう処理しています。


toDataURL()を利用しない画像トリミング、等については、下記ページの記事を参照下さい。

【参照】当方の記事: CreateJS 画像をトリミング(又は分割)してBitmap処理、Tweenさせる処理を考える

【参照】当方の記事: CreateJS バージョンUP(easeljs-0.7)に伴う「デモ」の変更点


原理的には、下記のjQuery記事の内容などとほぼ一緒ですので参考にして下さい。

【参照】当方の記事: jQueryで画像を分割して表示する


一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。
また、CreateJSの「仕様」もクルクル変わっていますので、バージョン違い等に充分注意下さい


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]