POPSブログ

CreateJS 画像分割アニメと、スイッチ風Circleボタン、サムネール表示の組み合わせ

230

  Category:  javascript2013/06/26 pops 

CreateJSを利用してキャンバスに、角丸吹き出し形式サムネール、スイッチ風のCircleボタンを表示します。ボタンを「クリック」すれば「画像分割アニメ」表示します。従来のものと余り変化は有りませんが、多少規則化されたアニメーションを実行します。
easeljs-0.7 でのテストです。

 

CreateJS 画像分割アニメと、スイッチ風Circleボタン、サムネール表示の組み合わせテスト


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


基本的には、前に作った「画像分割アニメーション」ですから大きな変化は有りません。1枚画像のスライドと、縦横2ドアタイプのアニメーション(Tween)を加えました。また簡単なボタンとサムネール表示を付けています。「ボタン」を押さなければ自動で次ぎの画像を表示します。
「画像分割アニメーション」では、ボタンとサムネールは余り必要としないものです。(非表示の切り替え可能)

 

[説明図]

 

1.「画像分割アニメーション」の分割は変更可能です。
2.「ボタン表示」「サムネール表示」非表示の切り替え可能。
3. 画像は一括読み込み方式ですから、10枚以内位で使用します(標準5-6枚)。
4. 最初に表示する画像(welcome画像)は自由ですが、有った方が効果的と思われます。
5. 完全では有りませんが不具合などなるべく出無いように処理。
6. 設定はJSの上部をご覧下さい。

7. このJSは、分割画像をBitmap化する場合、問題の起きない toDataURL() を使用しない形式に変更しています。但し、ブラウザによっては問題が起きるか不明のため、補正部分はそのままにしています。

 

DEMO


CreateJS 画像分割アニメと、Circleボタン、サムネール表示の組み合わせ (createJS021.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// マシン環境の悪い方は「Chrome」推奨 ///


Chrome Firefox Safari IE9、で動作確認済み。 (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>
	<canvas id="subCanvas" width="640" height="80"></canvas>
</div>

JS

createJS021.js、JS名は任意に変更可。(easeljs-0.7用)


//日本語
//createJS021.js
//デモ用1枚画像DOOR適正化、ボタンなしに変更可能
//easeljs-0.7用

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

//初期設定
var split_free=true;//自動分割 true false
var speed=1000;//拡大移動、アニメ速度
var slide_time;//未使用
var delay_speed=150;//出現間隔、delay基準時間 100-200

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

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

//読み込み画像の大きさcanvasと同じ
var imageW=640;
var imageH=300;

//タイマーの使用切り替え可能/use none
var timer_use="use";//use
//タイマー値 5000-10000
var time=8000;

//clickbtnの使用 use none
var clickbtn_use="use";//ues

//Loading AUTOの文字を表示するか use
//タイマーの使用しないときAUTOの文字なし
var text_use="use";

//Activeボタン
var activeBtn;
//ボタンの大きさ
var btnRadius=5;//半径
var btnSpace=10;//未使用
var interval_W=20;//ボタン間隔
var interval_H=20;//上からの位置
//ボタンactiveカラー
var active_color="#FF0000";

//サムネールを使用する true false
var thumbBoxUse=true;//true
//サムネールの大きさ余白
var thumbW=128;
var thumbH=60;
var margin=2;//余白 R
var interval_thumbH=50;//下からの位置


//画像manifestリスト
var manifest=[
{src:"/main/images/welcome_back.jpg",id:"welcome"},
{src:"/main/images/toyota_car10.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car11.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car12.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car13.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car15.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car16.jpg",id:"PHOTO"}
];

//------------------------------------------------------
//変数、未使用もあり

//ステージ
var stage,stage2;
//Loader
var loader;
//コンテナ
var container;
var backcontainer;
var loadingcontainer;
var progresscontainer;
var btncontainer;

//画像result
var globalflag=false,backImage,mainImage,keep_mainImage,welcomeImage,timerID=null;

//Loading
var loadingShape;
//TEXT
var viewtext;

//サムネールBOX
var thumbBox;//container
var thumbImage;//画像Bitmap
var thumb=false;//サムネール動作判定
var thumb_x=0;//サムネール位置

//ボタンが押された/有効
var btnValidity=false;

//読み込み画像result保存容器
var assets=[];
//分割大きさ位置保存容器
var chip_W=[],chip_H=[],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 progressbar;
var progtext;
var bar_v=0;
var once=true;
//load番号未使用
var loadcount=0;

var inType=true;
var moveType="";
var kcount=0;

//ボタン
var myBtn=[];
var activeBtn;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var shadow2=new createjs.Shadow("#FFFFFF",1,1,2);//影2未使用
var shadow3=new createjs.Shadow("#000000",0,0,8);//影3

//最初の画像0のこと
var image_no=0;
//画像数
var image_max=0;
//welcome画像は有るか
var welcomeflag=false;


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

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

	if (clickbtn_use == 'use') {
		//ステージ2
		stage2=new createjs.Stage('subCanvas');
		//MouseOver重要stage2
		stage2.enableMouseOver(20);
	}

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

	//welcome画像層画像表示
	//welcomeImage=new createjs.Bitmap(backgroundimage);
	//welcomeImage=new createjs.Bitmap('/main/images/welcome_back.jpg');

	//welcome画像層 空画像 現在使用
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);

	//
	stage.update();

	//下画像層、空画像コンテナを作る/寸法設定なくともOK
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);
	
	//スライス画像層、空コンテナを作る、使いまわし
	container=new createjs.Container();
	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表示判定

	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!");

	//サムネール補正
	if (clickbtn_use != 'use') {thumbBoxUse=false;}
	//FadeサムネールBOXを使用なら作る、使いまわし、移動
	if (thumbBoxUse && clickbtn_use == 'use') {
		thumbBox=new createjs.Container(0,0,thumbW+margin*2,thumbH+margin*2);
		thumbImage=new createjs.Bitmap();
		thumbImage.x=margin;
		thumbImage.y=margin;
		//縮小
		thumbImage.scaleX=thumbW/imageW;
		thumbImage.scaleY=thumbH/imageH;
		//back
		var thumbback=new createjs.Shape();
		//共通
		thumbback.graphics.s(0).beginFill("#FFFFFF");

		//RoundRectBOX矢印なし
		//operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

		//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
		roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

		thumbback.shadow=shadow;

		thumbBox.addChild(thumbback,thumbImage);
		thumbBox.regX=(thumbW+margin*2)/2;
		thumbBox.regY=(thumbH+margin*2)/2;
		thumbBox.x=canvasWidth/2;
		thumbBox.y=canvasHeight-interval_thumbH;//高さ
		stage.addChild(thumbBox);
		thumbBox.visible=false;
		//フエード用tick設定
		thumbBox.tick=function (){
			if(thumbBox.alpha < 1 && thumb) {
				thumbBox.alpha+=0.05;
				stage.update();
			}
		}
		//Ticker.Listener設定
		createjs.Ticker.addEventListener('tick',thumbBox.tick);
	}

	stage.update();

	if (clickbtn_use == 'use') {
		//ステージ2ボタンコンテナ、ボタンはあとで作る
		btncontainer=new createjs.Container();
		//ボタンコンテナをステージ2にaddChild
		stage2.addChild(btncontainer);
		btncontainer.visible=false;
		stage2.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;

	//welcome画像
	if (id == 'welcome') {
		welcomeflag=true;
	}

	//画像選別 commentの番号保存
	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表示判定

	//welcome画像ロード成功ならwelcome表示
	if (welcomeflag) {
		welcomeImage.alpha=0;
		//保存値に代入
		keep_mainImage=new createjs.Bitmap(loader.getResult("welcome")).image;
		//Fade表示
		welcomeImage.image=new createjs.Bitmap(loader.getResult("welcome")).image;
		var tween=createjs.Tween.get(welcomeImage)
		.to({alpha:1},800);
	}

	stage.update();

	//画像があれば、最初の画像表示
	if (image_max > 0) {

		//早すぎるので調整
		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();

			//Menuを作る
			if (clickbtn_use == 'use') {
				drawMenu ();
			}
			if (clickbtn_use != 'use') {
				//画像表示に進む
				draw();
			}

		},1000);
	}
}

//ボタンMenuを作る
function drawMenu () {

	//Activeボタンを作る
	activeBtn=createActivebtn (0,0,btnRadius,"#FF0000");

	//全ボタン幅
	var btnW_all=0;
	//Create-Bottunボタンを作る
	if (clickbtn_use == 'use') {

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

			//番号受け渡し
			var no=i;
			//Circle
			myBtn[i]=createCirclebtn(0,0,btnRadius,"#FFFFFF","#FFD700",no);
			myBtn[i].cursor="pointer";
			//ボタン間隔
			myBtn[i].x=i*interval_W;
			//ボタン判別用のproperty:idを書き込む、未使用
			myBtn[i].id=i;
			//新しいon形式クリックアクション
			myBtn[i].on("click",handleclick,null,false,i);
			//myBtn addChild
			btncontainer.addChild(myBtn[i]);

		}

		//activeBtnを乗っける
		btncontainer.addChild(activeBtn);
		//ボタン収容幅
		btnW_all=interval_W*(image_max-1);
		//ボタンコンテナを中央に修正1
		var btncont_x=(canvasWidth-btnW_all)/2;
		btncontainer.x=btncont_x;
		btncontainer.y=interval_H;

		btncontainer.visible=true;
		stage.update();
	}

	stage2.update();

	//遅延
	setTimeout(function() {

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

	},1000);

}

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

	globalflag=false;

	//サムネール表示中ならクリア
	if (thumb && thumbBoxUse) {
		thumbBox.visible=false;
		thumb=false;
	}

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		activeBtn.x=myBtn[image_no].x;
		stage2.update();
	}

	//AUTO文字表示/ボタン有効判定
	if (!btnValidity && timer_use =='use') {
		set_text("AUTO");
	}

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

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


	//最初、変更したので使用していない
	if (once) {
		//処理
		once=true;
	}

	//keep値が無ければ強制IN
	//keep_mainImage画像result値が無くOUTは分割drawImage()でエラーになるので注意
	if (!keep_mainImage) {inType=true;}

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

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

	//分割変更
	if (split_free) {
		splitNo=Math.floor(Math.random()*splitHs.length);
		//分割値代入
		split_h=splitHs[splitNo];
		//設定ミスなら1代入
		split_v=splitVs[splitNo] || 1;
	}

	//分割エラー修正
	if (!split_h) {split_h=1;}
	if (!split_v) {split_v=1;}

	//スライス寸法データを得る1
	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=[];
	//動きの分類
	moveType="";

	//標準パターン番号削除未使用
	var patternflag=false;
	//パターン番号未使用
	var pattern_no=0;

	//多目的判定用
	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;}
	//逆転フラグ2
	var chg_v2=Math.floor(Math.random()*2);
	if (chg_v2 < 1) {chg_v2=-1;}

	//タイプ決定フラグ使用
	var chgflag_v=Math.floor(Math.random()*3);
	var typeflag=0;

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

	//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()*9);
	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;}

	//回転の場合の食み出し防止、長いので見える、透過させる
	if (split_h == 1 || split_v == 1) {
		if (rotate > 0) {alpha_no=0;}
	}

	//typeflag分類
	//分割なしの1枚画像判定 1枚画像適正化
	if(split_all == 1) {
		typeflag=1;
	}

	//ホリゾンタルDOOR2/確率補正66%
	if(split_v == 2 && split_h > 4) {
		if(chgflag_v > 0) {
			typeflag=2;
		}
	}
	//バーチカルDOOR2/確率補正66%
	if(split_h == 2 && split_v > 4) {
		if(chgflag_v > 0) {
			typeflag=3;
		}
	}
	//ホリゾンタルアコーディオン33%
	if(split_v == 1 && split_h > 4) {
		if(chgflag_v == 1) {
			typeflag=4;
		}
	}

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

	//Bitmap配置、配置条件設定
	var vx=0,vy=0,angle_v=0;
	var shc=(split_h/2)-0.01;
	var svc=(split_v/2)-0.01;
	var diag_no=0;
	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 (typeflag == 0) {
			  //移動加算値等の計算
			  switch(disposition_no){
				case 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;}
				break;
				case 1://外側に、radius半径補正あり180/Math.PI
					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;
				break;
				case 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;}
				break;
				case 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;}
				break;
				case 4://YX内部ランダム位置
					disposition_X=Math.floor(Math.random()*canvasWidth);
					disposition_Y=Math.floor(Math.random()*canvasHeight);
					//スケール補正
					scale_no=0;
					spd_v=1;
				break;
				case 5://中央
					disposition_X=canvasWidth/2;
					disposition_Y=canvasHeight/2;
					if (!chgflag) {disposition_X=set_pos_X[k];}
					//スケール補正
					scale_no=0;
					spd_v=0.8;
				break;
				case 6://YX内部ランダム位置
					disposition_X=Math.floor(Math.random()*canvasWidth);
					disposition_Y=Math.floor(Math.random()*canvasHeight);
					//スケール補正
					scale_no=0;
					spd_v=0.8;
				break;
				case 7://XY軸中央付近
					//X軸中央補正
					if (chgflag2 == 1) {
						disposition_X=Math.floor(canvasWidth/2);
						disposition_Y=set_pos_Y[k];//そのまま
						scale_no=2;
					}
					//Y軸中央補正
					if (chgflag2 != 1) {
						disposition_X=set_pos_X[k];//そのまま
						disposition_Y=Math.floor(canvasHeight/2);
						scale_no=3;
					}
					//補正
					spd_v=1;
				break;
				default://そのほか
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//スケール補正
					scale_no=0;
					alpha_no=0;
					spd_v=0.8;
			  }
			}

			//ホリゾンタルDOOR2上下スライド
			if (typeflag == 2) {
				//上下に中心から補正
				disposition_X=set_pos_X[k];
				v_y=(canvasHeight/2+chip_H[k]/2)*chg_v;
				if (j == 0) {v_y *= chg_v2;}//上下
				if (chgxyflag < 2) {v_y *=flag3;}
				disposition_Y=v_y+canvasHeight/2;
				//補正
				scale_no=1;
				rotate=0;
			}
			//バーチカルDOOR2左右スライド
			if (typeflag == 3) {
				//補正
				scale_no=1;
				rotate=0;
				//左右に中心からテキトウ補正
				disposition_Y=set_pos_Y[k];
				v_x=(canvasWidth/2+chip_W[k]/2)*chg_v;
				if (i == 0) {v_x *= chg_v2;}//左右1
				if (chgflag2 == 1) {v_x *=flag3;}//左右2
				if (chgflag2 !=1) {v_x=0;scale_no=2;}//X軸中心へ
				disposition_X=v_x+canvasWidth/2;
			}
			//Hアコーディオン/その場/確率少ない
			if (typeflag == 4) {
				disposition_X=set_pos_X[k];
				disposition_Y=set_pos_Y[k];
				//スケール補正
				scale_no=2;
				rotate=0;
				spd_v=0.8;
			}

			//1枚画像
			if(typeflag == 1) {

			    //位置は4箇所に搾る
			    if (disposition_no == 1) {disposition_no=2;}
			    if (disposition_no == 4) {disposition_no=3;}

			  //移動加算値等の計算
			  switch(disposition_no){
				case 0://対角位置
					//対角位置算出
					disposition_X=set_pos_X[k]+canvasWidth*chg_v;
					disposition_Y=set_pos_Y[k]+canvasHeight*chg_v2;//逆転フラグ2
					scale_no=1;
					rotate=0;
					spd_v=1;
				break;
				case 2://左右に中心から補正
					disposition_X=set_pos_X[k]+canvasWidth*chg_v;//逆転フラグ
					disposition_Y=set_pos_Y[k];
					//回転補正
					if(rotate > 0) {alpha_no=0;}
					//スケール補正
					scale_no=1;
					spd_v=1;
				break;
				case 3://上下に中心から補正
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k]+canvasHeight*chg_v;//逆転フラグ
					//回転補正
					if(rotate > 0) {alpha_no=0;}
					//スケール補正
					scale_no=1;
					spd_v=1;
				break;
				default://そのほか全て中心
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//補正
					spd_v=1.5;
					//スケール例外その場拡大20%
					if (chgxyflag == 2) {scale_no=4;alpha_no=0;}
					if(scale_no == 1){alpha_no=0;}
					if(scale_no == 2 || scale_no == 3) {rotate=0;}
				//
			  }
			}

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

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

			//初期の移動
			//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_no10 ランダムを減らす30%
	if (delay_no == 10 && chgflag) {delay_no=0;}

	//1枚画像以外
	if(typeflag != 1) {

		//delayの計算/通常より増やした
		var sh=split_h-1;
		var sv=split_v-1;
		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;}

				if (delay_no == 0) {delay_st[k]=(i+j)*delay_speed;}
				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 == 8) {delay_st[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*2*delay_speed;}//円形状外から中心に
				if (delay_no == 9) {delay_st[k]=(Math.abs(i-(sh/2))-Math.abs(j-(sv/2)))*3*delay_speed;}//対角組あわせX状に
				if (delay_no == 10) {delay_st[k]=Math.floor(Math.random()*split_all)/2*delay_speed;}//適当なランダム
				if (delay_no > 10 ) {delay_st[k]=k*2*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;}
		}

	}
	//1枚画像setTimeout、delay補正
	if(typeflag == 1) {
		delay_st[0]=500;
	}

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

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

	//Easeの変更 IN最後遅くOUT等速
	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);
	},30);

}

//重ね順を一番上にする
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;
		stage.update();
	}

	//コンテナの中を削除
	container.removeAllChildren();
	//ボタン有効解除
	btnValidity=false;

	//welcome画像層画像を消す
	if (once) {
		welcomeImage.visible=false;
		once=false;
	}

	//flag
	kcount=0;
	globalflag=true;

	//処理少し遅延させる
	setTimeout(function() {
		//Ticker OFF
		createjs.Ticker.removeEventListener('tick',tick);
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			set_timer();
		}
	},500);

}

//スライス要素の位置大きさ決定、保存
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 ++;
		}
	}
}

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

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

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

}

//タイマー
function set_timer() {

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

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

//BtnClick
function handleclick (event,no) {

	//アニメ中は機能しない
	if (!globalflag) {return;}

	var hit_no=no;

	//表示中番号なら戻る
	if (hit_no == image_no) {
		return;
	} else {
		//ボタン有効/AUTO文字書き換え
		btnValidity=true;
		viewtext.text="";
		//タイマー強制停止
		clearTimeout(timerID);
		//指定番号の画像表示
		image_no=hit_no;

		//少し遅延させるclickは重要だ
		setTimeout(function() {
			draw();
		},300);//200-500

	}
}

//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-Circleボタンcは未使用
function createCirclebtn (x,y,r,outc,overc,no){

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";//name挿入
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(outc).drawCircle(x,y,r);
	btn.addChild(s);
	btn.shadow=shadow;

	//Circle rollover
	btn.addEventListener("rollover",function (e) {
		s.graphics.clear();
		//共通
		s.graphics.s().beginFill(overc).drawCircle(x,y,r);
		//Point計算、btncontainer基準localToGlobal
		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point補正btnRadius
		thumb_x=point.x;
		stage2.update();

		//サムネールopen
		if (thumbBoxUse) {
			openThumbBox(no);
		}

	});
	//Circle rollout
	btn.addEventListener("rollout",function (e) {
		s.graphics.clear();
		//共通
		s.graphics.s().beginFill(outc).drawCircle(x,y,r);
		stage2.update();

		//サムネールclose
		if (thumbBoxUse) {

			closeThumbBox(no);
		}

	});
	return btn;
}

//注意、Activebtn Circle
function createActivebtn (x,y,r,activec) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(activec).drawCircle(x,y,r)
	.beginFill("#000000").drawCircle(x,y,r/2);
	btn.addChild(s);
	return btn;
}

//RoundRectフキダシBOX
function roundRectBalloon(s,x,y,w,h,r,tw,th) {
	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(w/2+tw/2,y+h)
	.lineTo(w/2,y+h+th)
	.lineTo(w/2-tw/2,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);
}

//ThumbBox表示/update自動
function openThumbBox(no) {
	//サムネール画像書き換え/画像result取得
	thumbImage.image=new createjs.Bitmap(assets[no]).image;
	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;
	//stage.update();
}
//ThumbBox非表示
function closeThumbBox(no) {
	//サムネール画像クリア空画像挿入
	//thumbImage.image=new createjs.Bitmap().image;
	thumbBox.visible=false;
	thumb=false;
	stage.update();
}


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

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


/*日本語 createJS021.css*/

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

#image-box {
/*position:absolute;*/
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;
}

#btn-box {
position:relative;
top:0;left:0;
width:640px;
height:80px;
padding:0;
margin:0 auto;
}

#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;
}

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


簡単な説明


welcome画像について

画像の形式などは自由ですが、画像は全て同一の大きさになります。最初一度だけ表示され表紙の様なものです。有れば IN OUT いずれかで切り替えされます。(事前にmanifestに登録し読み込んでおく)
もし「welcome画像」が無い場合は最初は IN に設定されます(welcome画像無でOUT処理は、画像分割drawImage()処理出来ずエラーになる)。
「welcome画像」は下記の様にすれば表示されません。(削除または//を入れる)


//画像manifestリスト
var manifest=[
//{src:"/main/images/welcome_back.jpg",id:"welcome"},
{src:"/main/images/toyota_car10.jpg",id:"PHOTO"},

途中略す

{src:"/main/images/toyota_car16.jpg",id:"PHOTO"}
];

注意、drawImage() はCreateJSの処理関数ではなく、Canvasの画像処理関数ですから「エラー」の出ないように処理することが肝要。画像なしで処理すると「エラー」に成るのでここを確認する。


分割の変更

下記配列に、横、縦の分割データを登録しています。例では11x5分割が多く表示されるようになっています。追加変更可能です。その場合「奇数値」登録がキレイになりますが、「偶数値」であってもかまいません。

注意、横データ数と、縦データ数は同数になるように登録ください。分割合計数(例、11x5=55)が大きいと負荷、表示までの時間もかかります。キャンバスの大きさにもよりますが 100 以下に抑えてください。
11x2 2x11の様な2ドアタイプの分割は「2ドア」として処理される場合があります。横長の画像の場合にキレイになるように処理しています。


//自動分割の場合、free分割データを登録/奇数値が良い
var splitHs=[11,11,11,7,7,11,7,21,1,11,1,2];
var splitVs=[5,5,5,3,3,1,1,1,5,2,1,7];

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

例、11x5分割確率60%、11x1分割確率20%、1x1分割(1枚画像)確率20%
var splitHs=[11,11,11,11,1];
var splitVs=[5,5,5,1,1];

データ数は自由ですが、同じ分割が多ければ「出現確率」が増しますので調整できます。11x5の様な多分割は「正方形」に近ければキレイです。縦方向のバー状分割(例、11x1)は比較的キレイです。
但し、横方向のバー状分割(例、1x11)は余りキレイでは有りません。


2ドア分割処理、1枚画像処理

通常は色々なアニメ形態を持ちますので、2ドア処理をも確率は少ないのですが実効されます。下記の条件の分割を設定した時は2ドア処理が優先されます。スライド系で回転は殆んどしません。
2ドア分割処理される条件は下記の通りです。


1. ホリゾンタル2ドア(上下スライド)、縦方向分割で横2分割の場合、5x2 以上確率2/3。
2. バーチカル2ドア(左右スライド)、横方向分割で縦2分割の場合、2x5 以上確率2/3。
3. 1枚画像処理、1x1 分割がある場合は、1枚画像に適した処理が行われます。


ランダムな分割

分割を決定する部分で、ランダムな分割にする事も可能ですが、分割が似通っていると変化がわかりませんし余り意味がないので登録方式にしています。(色々ためして、この登録方式に落ち着いた)
仮に設定するとすれば、下記の様になります。アニメーションはどのような分割でも一応はある程度見栄えが良いようにはしています、、余りお勧めはしません


ランダムな分割の例、draw()上部

//分割変更
if (split_free) {
	split_h=Math.ceil(Math.random()*11);
	split_v=Math.ceil(Math.random()*5);
}

分割とアニメーション

どのような分割でも自由に登録できますが、変化はランダムな設定で処理されますから、必ずしもアニメーションが適切とは限りません。ランダム処理の都合で同じ形式が連続したりと都合よくは参りませんからご了承下さい。また処理如何によっては瞬間に「パッ」と表示してしまう事も有ります。
改造などは自由ですから変更等可能です。但し、確認作業が主に成りますが、改造にはかなりの時間を要します、むしろ独自のアルゴリズムを作り処理した方が早いかも知れません、要するにスコブル面倒!


サムネール表示形式

サムネール表示は矢印付きの「吹き出し形」と「角丸形」の2種類が選定できます。初期は「吹き出し形」になっていますが、切り替え可能です。(下記参照)
サムネール表示は「ボタン」mouseOver の時に Fade-In しますので、ボタンを使用する設定が必要です。


//RoundRectBOX矢印なし
//operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

 

CreateJSの場合、Jqueryなどと違い自動的にエラー回避処理しませんので、色々と機能を付加すると処理が大変ですし注意が必要だ。将来的には加味されてゆくでしょうが、、、


easeljs-0.7での変更

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


● サムネール rollover rollout アクション

easeljs-0.7より mouseover mouseout が rollover rollout になりましたので変更します。
新しい、rollover rollout、が古い、mouseover mouseout、と同様です。


//Circle rollover
btn.addEventListener("rollover",function (e) {

	略す

});
//Circle rollout
btn.addEventListener("rollout",function (e) {

	略す
});

● 「クリックアクション」。

easeljs-0.7から追加された on 形式を使用しました。リスナーが簡単になります。


//新しいon形式クリックアクション
myBtn[i].on("click",handleclick,null,false,i);

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

//BtnClick
function handleclick (event,no) {

	略す

	var hit_no=no;

	略す
}



画像が一瞬一番上に表示するのを補正


下層に挿入する画像が一瞬一番上に表示するのを補正する


「Firefox」「IE9」での問題である、通常は問題はないが多くの処理、大型複数画像を同時に変更表示する場合など過度な負荷がかかる場合に限るようであるが、、(不具合発生は、この条件に当たる)
マシン環境性能が良ければ起きない事かも知れないが、一応気になるので補正を考えた。


画像分割の時toDataURL()を使用すると問題がおきる。問題の起きない toDataURL() を使用しない形式に変更しています。但し未確認のブラウザもありますので補正はそのままです。アニメに影響は有りません。


[説明図]

 

対処方法は簡単。


一瞬「一番上に表示」する瞬間のみ「stage update」を行わない様にする、つまり「tick」を切れば良い。


● 実際の補正処理の例 1 (その都度Ticker設定の場合)

Tickerの実行を 20-50ミリ秒 遅らせるだけである。つまり「一瞬一番上に表示」しても自然消滅するので、その瞬間に「stage update」を行わない。下の様に setTimeout() で調整する。

言ってる事、チョット理解し難いと思いますが、、、


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

	略す

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

	略す

	//TWEENの実行
	var k=0;
	var params={};
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {
			//Tween等の処理
		}
	}

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

}

OUTの場合下画像を入れる場所は、下に移動しているが、上でもかまわない。


● 遅延補正処理のその補正 (処理しなくとも可)

どうしても処理しなければならない事では有りませんが。分割しない1枚画像のTweenはTickerを遅延させている間に開始する設定も有りますので、wait値 0 のものでも少し wait を駆ければ問題なく作動表示します。
delay反転前に処理する事。1枚画像の区別無く実行しても問題は無い。(50ミリ秒の遅延ですから50ミリ秒のwait値でも理論的には良いのだが、)

このJSでは1枚画像のみ処理しているが、他のJSは何もしていない。


ループ外に記述、1枚画像のみだから500ミリ秒を設定している。(100-500)


//1枚画像setTimeout、delay補正

if(typeflag == 1) {
	delay_st[0]=500;
}

1枚画像の区別無く実行する場合は、ループ内に記述、100ミリ秒を設定している。(最後に加算処理)
+=100 の記述に注意下さい。全てに加算しているかパターンは同じである。


//1枚画像以外
略す
if(typeflag != 1) {
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {
			略す
			//delayed遅延
			if (delayed == 1) {
				if (flag3 < 0) {delay_st[k] +=1000;}
			}
			//1枚画像の区別無く実行する場合は追加する
			delay_st[k] +=100;

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

画像分割アニメ基本形の記事です。ほぼ同じものですが、ボタン、サムネール表示は有りません。

【参照】当方の記事: CreateJS-Canvas画像分割アニメ、一括画像読み込み単純階層化、タイマー形式

Circleボタン表示については、次ぎの記事と同じです。

【参照】当方の記事: CreateJS マウスオーバーCircleボタン表示active対応


 

その他

DEMO専用です。使用する事は可能ですが、あくまでもテストですので個人の判断で使用下さい。画像などは各自ご用意下さい。JSの先頭部分をお読み下さい。
予告無くスクリプトなど修正する場合があります、ご了承下さい。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]