POPSブログ

CreateJS 大型画像スライス(画像分割)、スライドMENU

305

  Category:  javascript2014/06/12 pops 

大型画像の スライス(画像分割) and スライド MENUです。四角形スライスが主で、スライド、クロスフェードなどと組み合わせてみました。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。
TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

 

CreateJS 大型画像スライス、スライドMENU 3 テスト

ステージ内にマウスが入れば操作ボタンなどが表示されます。基本的にはタイマーで自動で画像コマ送りされますが、途中ボタンで任意の画像を表示できます。画像「クリック」で別ページにジャンプの設定可能です。
前々ページの「CreateJS 大型画像スライド(MENU)」をベースにエラー処理など少し付加したものですので、基本的には「前々ページ」「前ページ」を参照ください。


 

MENUを主目的としてリンクを設定する場合は、テキスト関連が貧弱ですから、それに応じて画像を意図的に加工(明示的にデザイン)しておけば効果的と思います。


上図の文字部分は画像ですので、画像分割の際は任意に分解されます。


DEMO


CreateJS 大型画像スライス、スライドMENU のデモ、(createJS089.js)

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



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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>

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


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box">
		<canvas id="mainCanvas" width="1000" height="250"></canvas>
	</div>
</div>

JS

createJS089.js、JS名は任意に変更可。注意、easeljs-0.7.1用です。


//日本語
//createJS089.js
//スライススライドMENU形式エラー処理
//角形、ホリゾンタル専用、1枚画像可能
//ステージ1つのoverlayタイプ

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

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

var open_speed=400;//Menu速度

//ボタンを作る/あとで変更
var clickbtnUse=true;//true false

//タイマーの使用、useであること
var timer_use="use";
//タイマー値 5000-10000
var time=8000;

//Hoverサムネールの大きさ
var thumbW=125;//125
var thumbH=50;//30
var thumbR=5;//角丸半径
var thumbposY=180;//Y位置

//overlayの大きさ
var overLayWidth=1000;
var overLayHeight=30;
var overLay_color='rgba(0,0,0,0.3)';//黒透過色

//Next-Btnの使用
var nextbtnUse=true;//true false

//ボタン半径
var btn_radius=7;
//ボタン間隔
var btnspace=20;
//Menu全体の大きさ
var btnboxWidth=0;//あとで再計算
//activeライン高さを考慮する
var btnboxHeight=10;//未使用
//Menu全体の背景色
///Menu全体のY配置位置
var btnbox_Y=235;

//案内文を表示する
infortextUse=true;//false true
//模擬ボタンを作りリンクを有効にする
var linkUse=true;//false true
//下画像のリンクを有効にする
var imagelinkUse=false;//false true

//テキスト表示の使用 use=true
text_use=true;//true false

//分割設定----------------------------------------

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

var split_free=true;//自動分割 true false
//自動分割でない場合の分割
var split_h=12;//標準の横方向分割数、奇数値
var split_v=3;//標準の縦方向分割数、奇数値
var split_all=split_h*split_v;
//自動分割の場合、free分割データを登録/奇数値が良い
var splitHs=[11,11,19,11,15,11,5,3,1];//縦40以上は注意、修正済み
var splitVs=[3,3,5,2,1,1,1,1,1];

//スケール方向番号データ 0-3
var scales=[0,0,0,0,1,2,3];
//回転データ、余り回転しない、回転は120度x回転データ
var rotates=[0,0,0,0,1,2,3];

//分割設定終り------------------------------------

//画像manifestリスト
var manifest=[
{src:"/main/images/city001b.jpg",id:"PHOTO1"},
{src:"/main/images/city002b.jpg",id:"PHOTO2"},
{src:"/main/images/city003b.jpg",id:"PHOTO3"},
{src:"/main/images/city004b.jpg",id:"PHOTO4"},
{src:"/main/images/city005b.jpg",id:"PHOTO5"},
{src:"/main/images/city006b.jpg",id:"PHOTO6"}
];

//案内文、リンクデータは画像数にあわせて編集
//タイトル
var title_text=["Blog","Index","Service","Links","Download","Map"];//未使用
//案内文
var info_text=[
"POPS-WEB Blog ページに進みます",
"POPS-WEB Index ページに進みます",
"POPS-WEB Service ページに進みます",
"POPS-WEB Links ページに進みます",
"POPS-WEB Download ページに進みます",
"POPS-WEB Map ページに進みます"
];

//リンクデータ
var link_url=["blog.html","index.html","service.html","links.html","download.html","map.html"];
//登録色
var d_color=["#FF1493","#FF69B4","#FFA07A","#9370DB","#6A5ACD","#4682B4","#778899","#B8860B","#DEB887","#FFD700"];//代替画像に利用

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

//ステージ
var stage;

//コンテナ
var container;
var backcontainer;
var loadingcontainer;
var progresscontainer;
var textcontainer;
var btncontainer;
var nextcontainer;
var linkcontainer;

var hoverthumb;
//ローダー
var loader;
//LoadingShape
var loadingShape;

//読み込み画像の大きさ、未使用
var imageH=0,imageW=0;
//読み込み画像URL保存容器
var assets=[];

//変数
var globalflag=false,topImage,backImage,mainImage,keep_mainImage,timerID=null;
var viewtext;
//overlay
var overLay;
var thumb=false;//サムネール動作判定
var infortext;

//ボタン保存
var myBtn=[];//Circle-Btn
//Activebtn Circle
var activeBtn;
var linkBtn;//Go-Btn
var nextBtn,prevBtn;//Next Prev-Btn

//分割
//ボタンが押された/有効
var btnValidity=false;
var inType;
var moveType;
var kcount=0
var once=false;

////分割
//分割大きさ位置保存容器
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=[];
//分割なし1枚画像用スライド移動位置データ/注意中心補正値
var posX=[canvasWidth/2,canvasWidth*1.5,-canvasWidth*1.5,canvasWidth/2,canvasWidth/2,canvasWidth/2,canvasWidth/2,canvasWidth/2,canvasWidth/2];
var posY=[canvasHeight/2,canvasHeight/2,canvasHeight/2,canvasHeight*1.5,-canvasHeight*1.5,canvasHeight/2,canvasHeight/2,canvasHeight/2,canvasHeight/2];

//色付きcanvas保存画像を作る
keep_mainImage=createColorCanvas (canvasWidth,canvasHeight,"#000000");

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

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

//陰影
var shadow=new createjs.Shadow("#000000",0,0,4);

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

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

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);

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

	//この位置に画像表示可能

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

	//下画像クリックアクション/番号は仮
	if(imagelinkUse) {
		backImage.on("click",gobtn_handleclick,null,false,image_no);//有効
	}

	//上画像層、コンテナのみを作る
	container=new createjs.Container();
	//画像分割は中のインスタンスはあとで作る
	stage.addChild(container);

	//TEXT text_useが有効なら作る
	if (text_use) {

		//TEXTコンテナ フィールド00なので中央表示にはならない
		textcontainer=new createjs.Container();
		//textbackShape
		var textback=new createjs.Shape();
		textback.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,25);
		textback.alpha=0.3;
		textback.visible=false;//非表示

		//注意 大きさを設定しないと文字は表示しない
		viewtext=new createjs.Text("---","12px Arial","#FFFFFF");
		viewtext.x=20;
		viewtext.y=18;
		viewtext.lineWidth=canvasWidth-40;
		viewtext.lineHeight=20;
		viewtext.textBaseline="bottom";
		textcontainer.addChild(textback,viewtext);
		stage.addChild(textcontainer);
		//テキスト陰影
		viewtext.shadow=shadow;

		text_set("LOADING NOW");
	}

	//loading3コンテナをステージにaddChild
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//ShapeのLOADINGを作る
	loadingShape=loadingIndicator3();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		loadingShape.rotation +=5;

	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定未使用

	//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);
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//Overlayを作るを作る
	overLay=new createjs.Shape();
	overLay.graphics.beginFill(overLay_color).drawRect(0,0,overLayWidth,overLayHeight);
	//中央補正
	overLay.regX=overLayWidth/2;
	overLay.regY=overLayHeight/2;
	stage.addChild(overLay);
	overLay.visible=false;

	//NEXTボタンコンテナ
	nextcontainer=new createjs.Container();
	nextcontainer.x=0;
	nextcontainer.y=btnbox_Y+3;
	stage.addChild(nextcontainer);
	nextcontainer.visible=false;

	//ボタンコンテナ
	btncontainer=new createjs.Container();
	//ステージにaddChild
	stage.addChild(btncontainer);
	btncontainer.visible=false;


	//FadeサムネールBOX
	hoverthumb=new createjs.Shape();
	//仮のgraphicsで画像は入っていない
	hoverthumb.graphics.beginFill("#000000").drawRoundRect(0,0,thumbW,thumbH,thumbR);
	hoverthumb.regX=thumbW/2;
	hoverthumb.regY=thumbH/2;
	hoverthumb.x=0;//後で決定
	hoverthumb.y=thumbposY;//Y配置位置
	hoverthumb.shadow=shadow;//陰影
	stage.addChild(hoverthumb);
	hoverthumb.visible=false;
	//フエード用tick設定
	hoverthumb.tick=function (){
		if(hoverthumb.alpha < 1 && thumb) {
			hoverthumb.alpha+=0.05;
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',hoverthumb.tick);

	//Go-btn設置/模擬ボタン
	if(linkUse) {

		//リンクコンテナ
		linkcontainer=new createjs.Container();
		//BTN
		linkBtn=createShapeBtn2(0,0,60,20,5,"GO","12px","#FFFFFF","#FF69B4",0);//変更可能
		linkBtn.x=canvasWidth-60;
		linkBtn.y=25;
		//linkBtn.shadow=shadow;//陰影
		//TEXT
		infortext=new createjs.Text("","13px Arial","#FFFFFF");
		infortext.textAlign="right";
		infortext.x=canvasWidth-100;
		infortext.y=15;
		infortext.shadow=shadow;
		linkcontainer.addChild(infortext,linkBtn);

		//クリックアクション/番号は仮
		linkBtn.on("click",gobtn_handleclick,null,false,image_no);//不要なら削除する
		stage.addChild(linkcontainer);
		linkcontainer.visible=false;
	}

	//Main-Ticker設定
	createjs.Ticker.setFPS(30);
	//createjs.Ticker.timingMode=createjs.Ticker.RAF;
	createjs.Ticker.addEventListener('tick',tick);

	//画像ロードに進む
	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);
	//error関数を追加
	loader.addEventListener("error",loaderror);

	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

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

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

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

	text_set("LOADING END!");
	//画像数確認、再計算
	image_max=assets.length;

	//loader Listener削除 こちら使用に修正
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);
	//追加error関数を削除
	loader.removeEventListener("error",loaderror);

	//loading Listener削除
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//loading container非表示
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	//画像があれば
	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("");
			//Mainに進む
			main();

		},2000);
	}

}
//エラー処理
function loaderror(eventObject) {

	//エラーの場合代替画像を作りassets容器に格納
	//var img=createColorCanvas (canvasWidth,canvasHeight,"#FFFFFF");//ベタ
 	var img=createLineGradBox (canvasWidth,canvasHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
	assets.push(img);
}

//MENU他
function main () {

	//MENUボタンを作る
	set_btnMenu();

	//ステージアクション
	stage.addEventListener('stagemousemove',overlay_open);//over
	stage.addEventListener('rollout',overlay_close);//out

	draw();//画像表示

}

//MENUボタンを作る
function set_btnMenu() {

	var btnBox=new createjs.Container();

	//Activeサークルを作る
	activeBtn=createActiveBtn(btn_radius,"#00CED1");

	//HoverMenu clickタイプ
	for (var i=0; i < image_max; i++) {

		//番号受け渡し
		var no=i;

		//BTN要素を作る
		myBtn[i]=createHoverbtn(btn_radius,"#ADD8E6","#FFD700",no);
		//初期間隔
		myBtn[i].x=btnspace*i;
		myBtn[i].y=0;
		//判別用のproperty:idを書き込む、未使用
		myBtn[i].id=i;
		myBtn[i].cursor="pointer";

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

		//addChild
 		btnBox.addChild(myBtn[i]);
	}

	//activeBtnを乗っける
	activeBtn.y=0;
	btnBox.addChild(activeBtn);

	btnboxWidth=btnspace*(image_max-1);
	btncontainer.addChild(btnBox);

	//Next-Btn
	if(nextbtnUse) {

		//NEXT
		nextBtn=createNextBtn(16,16,5,"#FF0000");
		nextBtn.regX=8;
		nextBtn.regY=8;
		nextBtn.x=canvasWidth-15;
		nextBtn.shadow=shadow;
		//NEXTボタンコンテナ配置
		nextcontainer.addChild(nextBtn);
		nextBtn.on("click",nexthandleclick,null,false,image_no);

		//PREV
		prevBtn=createNextBtn(16,16,5,"#FF0000");
		prevBtn.regX=8;
		prevBtn.regY=8;
		prevBtn.rotation=180;
		prevBtn.x=15;
		prevBtn.shadow=shadow;
		//PREVボタンコンテナ配置
		nextcontainer.addChild(prevBtn);
		prevBtn.on("click",prevhandleclick,null,false,image_no);
	}

	//中央補正
	btncontainer.x=(canvasWidth-btnboxWidth)/2;
	btncontainer.y=btnbox_Y;
	//Overlay
	overLay.x=canvasWidth/2;
	overLay.y=btnbox_Y+btn_radius/2;//補正

}

//BTN要素作成
function createHoverbtn(r,c,hc,no) {

	var btn=new createjs.Shape();//BTN
	btn.graphics.beginFill(c).drawCircle(0,0,r);
	//active判定用
	var no=no;

	//ラップコンテナrollover
	btn.addEventListener("rollover",function (e) {
		btn.graphics.clear();
		//
		btn.graphics.beginFill(hc).drawCircle(0,0,r);

		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point補正btnRadius
		hoverthumb.x=point.x;
		//サムネールopen
		openThumbBoxEx(no);
	});
	//ラップコンテナrollout
	btn.addEventListener("rollout",function (e) {
		btn.graphics.clear();
		//
		btn.graphics.beginFill(c).drawCircle(0,0,r);
		//サムネールclose
		closeThumbBox(no);
	});

	return btn;
}

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

	globalflag=false;
	text_set("");

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

	//サムネール表示中ならクリア
	if (thumb) {
		hoverthumb.visible=false;
		thumb=false;
	}
	//リンクボタン非表示
	if(linkBtn) {
		//linkBtnコンテナ
		linkcontainer.visible=false;
	}

	//activeボタン変更
	//MENU-OPEN
	//activeBtn移動
	activeBtn.x=myBtn[image_no].x;

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

	//画像保存がなければIN
	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;

	//分割変更
	if (split_free) {
		var splitNo=Math.floor(Math.random()*splitHs.length);
		//分割値代入
		split_h=splitHs[splitNo];//★縦40以上は注意
		split_v=splitVs[splitNo];
	}

	//スライス寸法データを得る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.width=chip_W[k];
			sliceCanvas.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]);
			//Canvasエレメントを保存
			srcArr[k]=sliceCanvas;

			k++;
		}
	}

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

	//動きの分類
	moveType="bar";
	if(split_h > 1 && split_v > 1){moveType="square";}
	if(split_h > 1 && split_v == 1){moveType="h-bar";}
	if(split_h == 1 && split_v > 1){moveType="v-bar";}
	if(split_v == 2){moveType="door-2";}
	if(split_all == 1){moveType="sheet";}

	//標準パターン番号削除未使用
	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;}

	//タイプ決定フラグ未使用
	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()*4);
	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;

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

	//skew歪みを付ける
	var skew_flag=false;
	var skew_v=0;
	var skew_x=0;
	var skew_y=0;

	//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++) {

			//Canvasエレメントを表示のために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;


			//移動加算値等の計算
			//square
			if (moveType == 'square') {
				switch(disposition_no){
				case 0://その場所で
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//スケール補正
					scale_no=1;
					alpha_no=0;
					spd_v=0.5;
					//スケール例外その場拡大20%
					if (chgxyflag == 2) {scale_no=4;}
					break;
				case 1://その場所で2
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//補正したほうが無難
					if(scale_no == 1) {alpha_no=0;}
					break;
				case 2://その場所で3、少し位置をずらす、ずれないこともある
					disposition_X=set_pos_X[k]+chip_W[k]*chg_v*chgflag*0.5;
					disposition_Y=set_pos_Y[k]+chip_H[k]*chg_v*chgflag*0.5;
					//補正したほうが無難
					if(scale_no == 1) {alpha_no=0;}
					spd_v=0.75;
					break;
				case 3://その場所で4、skew歪みを付ける
					//IN OUT共に有り
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];

					if (chgxyflag < 3) {
						skew_flag=true;
						//XYいずれか
						if (chgflag > 1) {
							skew_x=90*chg_v;//逆転有り
							skew_y=0;
						}
						if (chgflag < 2) {
							skew_x=0;
							skew_y=90*chg_v;//逆転有り
						}
					}
					if (chgxyflag > 2) {
						skew_flag=true;
						//動作が大きい逆転有り
						skew_x=90*chg_v;
						skew_y=-180*chg_v;
					}

					//スケール補正
					scale_no=chgflag2-1;//0 1
					alpha_no=1;
					rotate=0;
					break;

				default://そのほか
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//スケール補正
					scale_no=0;
					alpha_no=0;
					spd_v=0.8;
				}
			}

			//no-square
			if (moveType == 'h-bar' || moveType == 'v-bar') {
				//移動加算値等の計算
				switch(disposition_no){
				case 0://その場所で

					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//alphaスケール補正
					if(scale_no == 1) {alpha_no=0;}
					spd_v=0.5;
					//スケール例外その場拡大20%
					if (chgxyflag == 2) {scale_no=4;}
				break;
				case 1://左右に中心から補正
					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 2://上下に中心から補正
					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;
				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 (moveType == 'door-2') {

				//上下に中心から補正
				disposition_X=set_pos_X[k];
				disposition_Y=set_pos_Y[k];
				if(j == 0) {v_y=(canvasHeight/2+chip_H[k]/2)*chg_v;}
				if(j == 1) {v_y=(canvasHeight/2+chip_H[k]/2)*chg_v*-1;}
				spd_v=0.5;

				switch(disposition_no){
				case 0:
					//スケール補正
					scale_no=1;
					alpha_no=1;
					//回転補正
					rotate=0;
				break;
				case 1:
					//移動半分
					v_y *=0.5;
					//スケール補正
					scale_no=1;
					alpha_no=0;
					//回転補正
					rotate=0;
				break;
				case 2:
					//移動しない
					v_y=0;
					//補正
					alpha_no=0;
					//回転補正
					rotate=0;
				break;
				default://そのほか

					//回転補正
					rotate=0;
				}
				//Y確定
				disposition_Y=v_y+canvasHeight/2;
			}

			//1枚画像 slide scale
			if (moveType == 'sheet') {
				//移動位置決定/0=FADE/1=left/2=right/3=up/4=down/567=scale
				var no=Math.floor(Math.random()*8) || 0;
				//XY
				disposition_X=posX[no];
				disposition_Y=posY[no];
				//スケール補正
				if(no < 5) {scale_no=1;}
				if(no == 5) {scale_no=0;}
				if(no == 6) {scale_no=2;}
				if(no == 7) {scale_no=3;}
				//
				if(no == 0) {alpha_no=0;}
				//回転補正
				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;

				//INskew
				if (skew_flag) {
					chip[k].skewX=skew_x;
					chip[k].skewY=skew_y;
				}
			}

			//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;

				//OUTskew
				chip[k].skewX=0;
				chip[k].skewY=0;
			}

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

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

	//分割数が多い場合早く75%
	if(split_all > 60) {spd_v=0.75;}

	//delay_no10 ランダムを減らす30%
	if (delay_no == 10 && chgflag) {delay_no=0;}

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

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

	//EDIT用、状況をテキスト表示
	//text_set("MT/"+moveType+" DNo."+disposition_no);

	//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) {
				//skew
				params={x:set_pos_X[k],y:set_pos_Y[k],scaleX:1,scaleY:1,rotation:0,alpha:1,skewX:0,skewY:0};
			} else {
				//skew
				params={x:mov_pos_X[k],y:mov_pos_Y[k],scaleX:scale_X,scaleY:scale_Y,rotation:rotate_v[k],alpha:alpha_no,skewX:skew_x,skewY:skew_y};
			}

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

			k++;

		}
	}

}

//重ね順を一番上にする
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();
	//クリア
	kcount=0;
	globalflag=true;

	//画像処理に時間がかかるので、少し遅延させる
	setTimeout(function() {
		//Go-btn表示
		if(linkUse) {
			//テキスト交換
			if(infortextUse) {infortext.text=info_text[image_no];}
			//linkBtnコンテナ
			linkcontainer.visible=true;
		}
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			if (clickbtnUse) {text_set("AUTO");}
			set_timer();
		}

	},500);

}


//スライス要素の位置大きさ決定、保存
function slice_set(bw,bh,slh,slv) {

	//スライス/細分しすぎるとroundでエラーになる場合あり修正
	slice_W=Math.round(bw/slh);//YOKO
	slice_H=Math.round(bh/slv);//TATE
	//とりあえずエラー回避のみ
	slice_Wb=bw-slice_W*(slh-1);
	if(slice_Wb < 1) {slice_Wb=2;}
	slice_Hb=bh-slice_H*(slv-1);
	if(slice_Hb < 1) {slice_Hb=2;}

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

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

//Lay表示アクション
//Lay-OPEN
function overlay_open(){
	//Lay表示
	overLay.visible=true;
	nextcontainer.visible=true;
	//MENU表示
	btncontainer.visible=true;
}
//Lay-CLOSE
function overlay_close(){
	//Lay非表示
	overLay.visible=false;
	nextcontainer.visible=false;
	//MENU非表示
	btncontainer.visible=false;
}

//arcToフキダシBOX
//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
function openThumbBoxEx(no) {

	//サムネール画像書き換え/画像result取得
	hoverthumb.graphics.clear();

	//外側ラインなしEx
	//hoverthumb.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//外側ライン有りEx
	hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

	hoverthumb.alpha=0;
	hoverthumb.visible=true;
	thumb=true;
}

//ThumbBox非表示
function closeThumbBox(no) {
	//サムネール非表示
	hoverthumb.visible=false;
	thumb=false;
}

//NEXTボタン処理
function nexthandleclick(event,no) {
	//アニメ中は機能しない
	if (!globalflag) {return;}
	next_set();
}
//PREVボタン処理
function prevhandleclick(event,no) {
	//アニメ中は機能しない
	if (!globalflag) {return;}
	prev_set();
}

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

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

	//タイマー切
	if (timer_use == 'use') {clearTimeout(timerID);}//複数は必要追加
	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();

}
//前の開く要素を計算
function prev_set() {

	//タイマー切
	if (timer_use == 'use') {clearTimeout(timerID);}//複数は必要追加
	//前の番号
	image_no -=1;
	if (image_no < 0) {image_no=image_max-1;}
	draw();

}
//タイマー
function set_timer() {

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

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

}

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

		},200);//200-500

	}
}
//Go-btn-Clickアクション/noは未使用
function gobtn_handleclick (event,no) {

	//登録リンクデータ
	//var url="/main/html/" + link_url[image_no];//有効にすること

	var url="javascript:void(0)";//削除のこと

	//ウィンドウに出力
	location.href=url;

}

//TEXT表示
function text_set (t) {
	if (text_use) {
		viewtext.text=t;
		stage.update();
	}
}

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

//注意、Activebtn Circle
function createActiveBtn(r,activec){
	//
	var s=new createjs.Shape();
	//共通
	s.graphics.beginFill(activec).drawCircle(0,0,r);
	return s;
}
//Next-Btn
function createNextBtn(w,h,r,c){
	//
	var s=new createjs.Shape();
	//共通
	s.graphics.beginFill("#888888").drawRoundRect(0,0,w,h,r);
	s.graphics.beginFill(c).drawCircle(w/2,h/2,(w-2)/2);
	s.graphics.beginFill("#FFFFFF").drawPolyStar(w/2,h/2,(w-4)/2,3,0,0);
	return s;
}

//arcToフキダシBOX拡張arcToEx形式
//x,y,幅,高さ,半径,矢幅,矢高さ
createjs.Graphics.prototype.arcToBalloonEx=function(x,y,w,h,r,tw,th){
	this.moveTo(x+w/2,y)
	.arcTo(x+w,y,x+w,y+h,r)
	.arcTo(x+w,y+h,w/2+tw/2,y+h,r)
	.lineTo(x+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,y+h)
	.arcTo(x,y+h,x,y,r)
	.arcTo(x,y,x+w/2,y,r)
	.lineTo(x+w/2,y)
}

//create-Shape模擬ボタン
function createShapeBtn2 (x,y,w,h,r,label,size,lc,backcolor,no) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var shape=new createjs.Shape();
	//Fill
	shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
	shape.regX=w/2;
	shape.regY=h/2;

	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";
	btn.addChild(shape,tx);

	//rollover
	btn.addEventListener("rollover",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill("#DAA520").drawRoundRect(x,y,w,h,r);
		//stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
		//stage.update();
	});

	return btn;
}

//幅、高さ、画像
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//色背景つき画像
//全幅、全高さ、背景色、画像幅、画像高さ、画像
function createColorImgCanvas(w,h,c,imgw,imgh,img) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	ctx.drawImage(img,0,0,imgw,imgh);

	return canvas;
}

//変換は配列で返す、未使用
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

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

//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}

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

//簡単なLOADING
function loadingIndicator3 () {

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

	//描画データ
	var alpha_v=1;//透明度
	var alphaback;

	var cx,cy;
	var numNeedles=12;
	var innerR=15;
	var outerR=10;
	var cAngle=-Math.PI/2;
	var nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		rotateflag=cAngle -=nAngle;
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		//#CCCCCC
		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).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

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


/*日本語 createJS087.css*/

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

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0px;
width:1000px;
height:250px;
padding:0;
margin:0 auto;
background-color:#000000;
}

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


 

簡単な説明


[説明図]

 

CreateJS 大型画像スライス、スライドMENU 3

ボタン操作で該当画像を表示します。CLICKしない場合は自動で順繰り表示します。時間間隔はタイマーで変更可能です。スライス、スライド、フェード処理中はボタンを押しても機能しません。


1. 大型画像用途で、MENU兼用になります。(MENUとして利用しない設定もOK)
但し「MENUとして使用できないことはない」と言う程度のものです
2. LINK用のボタンを表示できます。また画像に直接アクションを設定可能です。
3. ボタンHOVERで、該当のサムネール画像を表示できます。(サムネールはShapeで単純化)
4. スライス、スライド、など分割の形状により違いがあります。指定も可能です。
(当然ですが、アニメ部分をかえれば色々な応用エフェクトに可能です)
5. 「説明案内文」など1行のみTEXT表示が可能です。
6. 既存のTEXT表示がありますので、利用が可能です。
7. 画像読み込み失敗時、代替画像挿入の「エラー処理」を行いました。
8. 詳細は、JS上部を参照ください。


基本的にはMENUなどは同じで有り、画像アニメーション部分のみを「画像分割アニメ」に改造しています。
以下、概略のみの説明です。

 

 

分割形状による違い

分割形状により、以下の様に分類して形状にあうアニメを実行できるように考慮しています。

 

分割形状により動きが違います。余り移動を伴わないその場所でのエフェクトに重点を置きましたので、少々以前の「画像分割アニメ」と違う感じになります。(前のものは移動量が多く、其の場所での変化は少ない作りでした)
下記の分類になりますが、基本的に「横長のバーチカルバー」の分割はデモではありません。(適当に処理されるが必ずしも分割にあうとは限らない....)


1. square、四角形での分割、其の場所でのエフェクトを多くしている。(四角形に近いと綺麗)
2. h-bar、縦長のホリゾンタルバー、上下および左右の移動が多い。
3. v-bar、横長のバーチカルバー、其の場所でのエフェクトを多くしている。
(1.2.4.5.以外のものを簡単なエフェクトにしているので、明確な v-bar の動きはない)
4. door-2、2ドア、縦方向2分割の場合には強制的に上下に開くエフェクト。
5. sheet、分割なしの1枚画像は、スライドと伸縮、フェードのエフェクト。
6. 基本的に「横長のバーチカルバー」の分割は横幅が長すぎ合わないのでしません。
(他のJSで処理している例もある)
7. 必ずしも全て綺麗になる補償はありません。それなりです。
8. リンク関連の設定をしなければ、画像のみ表示の「画像分割アニメ」として利用可能です。


画像の大きさ

画像の大きさはCanvasの大きさになりますが、Canvasが大きいと負荷がかかります。ページでは他のJS、CSSも動作していますので画像の大きさは動作を確認し最小限にしてください。
マシン環境性能に左右されますが、1000x500 位が限度で「青息吐息」「酸素欠乏」「心筋梗塞」、結構きつい。
「デモ」では 1000x250 で高さを抑えて対処しています。これらの大きさの設定(画像の大きさ)は使用者の判断です。



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

HTMLのCanvasの大きさも必ず合わせる事。CSSでの変更は縮尺が狂うので出来ません。


分割形状による処理的分類

処理上の都合により、下記の様に分類されて、一応、分類に合うような適正処理をしています。



//動きの分類
moveType="bar";
if(split_h > 1 && split_v > 1){moveType="square";}
if(split_h > 1 && split_v == 1){moveType="h-bar";}
if(split_h == 1 && split_v > 1){moveType="v-bar";}
if(split_v == 2){moveType="door-2";}
if(split_all == 1){moveType="sheet";}

画像分割アニメについて

ここでは説明を省略しますので詳細は下記記事などを参照ください。多少違いは有りますが基本的な処理は同じです。

【参照】当方の記事: CreateJS 画像分割とテキストアニメーションの組み合わせ (最新)

【参照】当方の記事: CreateJS-Canvas画像分割アニメーションのテスト、タイマー形式

【参照】当方の記事: CreateJS 画像分割アニメーション、一括画像読み込み、toDataURL()を使用しない方式 (easeljs-0.7用)


上画像層と下画像層

2つの画像層を使って操作しています。「分割した画像」は「上画像層」で処理されます。1サイクル毎に「分割した画像」は破棄されます。


最初の画像を作る

IN OUT のエフェクトがあるのが特徴ですが、最初にOUTになる場合に1枚の画像が多く必要になりますので、デモでは「黒背景色」で「代替画像」を作り、画像保存値に入れてあります。(現在、ステージ背景は黒のShapeが理由)
つまり「分割アニメ」以前に「表示画像」があればそれも利用できる事につながります。



//色付きcanvas保存画像を作る
keep_mainImage=createColorCanvas (canvasWidth,canvasHeight,"#000000");

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

なんらかの画像
keep_mainImage=完全読み込み画像のresult値;

画像保存がなければ最初は IN で処理される。


//画像保存がなければIN
if (!keep_mainImage) {
	inType=true;
}

分割の変更

デモでは以下の様になっています。同じ分割を増やせば出現確率が増します。(原則として、最大分割合計は60位で抑えるのがベターです、合計80-100位は可能ですが)
分割は自由ですが、「奇数値」の分割が綺麗になります。分割の登録がなければ実行されません。
このJSでは、原則、横長のバーチカルバーの設定は避けてください。専用処理をしていませんので綺麗にはなりません。登録は可能ですがそれなりの「適当な」動きです。


横 1、縦 1、は分割なしの1枚画像です。
尚、横 40以上、縦 1、などは「丸め計算」の影響で最後の幅が大きく違ってきます。(誤差の少ない 20-30 にする、または幅の割り切れる数値を入力)



//自動分割の場合、free分割データを登録/奇数値が良い
var splitHs=[11,11,19,11,15,11,5,3,1];//縦40以上は注意、修正済み
var splitVs=[3,3,5,2,1,1,1,1,1];

画像トリミング(drawImageメソッド)は整数値で分割しないと画像の間に隙が出る。一応分割でエラーの無い様に処理していますが....


アニメの時間

アニメの時間(Tween)ですが、分割画像の出現間隔(遅延値、Tweenではwait値)を変える事によりパターンを変更しています。delay遅延基準時間をかえます(見た目は結構変わる)。下図参照
移動などはアニメ速度で制御されていますが、分割数が増えても大きな差はありません。


アニメーション時間 = 分割合計数 x 出現間隔 + アニメ速度、になります(簡易的な考え方で)。



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

時間短縮

大型画像の場合は、分割数が多くなる傾向になりますが、それだけアニメーション時間が長くなり、動きが冗長になりますので「分割数が多い場合」少し時間を短縮しています。
Canvas処理はFlashと比較して処理能力が大きく劣りますので、60分割合計以内が適正です。(マシン環境により違いがありますので、使用者が判断する)



//分割数が多い場合早く75%
if(split_all > 60) {spd_v=0.75;}

動作を確認して、必要に応じ数値を変えるか、削除する。


スケール方向と回転

伸縮などは事前に規則を作り、それに従って処理すれば簡単になります。決め方などは自由でが、移動、透明度などと合わない時は強制的に修正します。

 

スケール方向は伸縮する方向を分類したものでこの番号でTweenでのXY方向のスケールを変化させます。原点は中心になります。(番号1 は伸縮しませんので変化は移動または透明度を変える選択肢のみになります)
回転は設定配列の数値をランダムに使用します。このJSでは「120度」を乗じて使用しますがマイナスになる場合もあります。0 が多ければ回転の確率は低下します。
共に、以下配列を書き換えれば確率を変える事が可能です。



//スケール方向番号データ 0-3
var scales=[0,0,0,0,1,2,3];
//回転データ、余り回転しない、回転は120度x回転データ
var rotates=[0,0,0,0,1,2,3];

ランダムに条件を変えるために分類など行ったもので、決めかたは自由です。
このJSでは、「原点」は「中心補正」していますが、其の「原点」位置の決め方次第では画像エフェクトの感じは違ってきます。


移動が少ない弊害

移動が少ないその場での変化が多いために、分割フエードの処理時の条件次第で、1枚画像のフエードと区別できない事も発生します(無駄な分割だ)。ランダムな設定処理ですからご了承ください。


改造での確認

改造するのは、いい加減適当で良いので比較的簡単ですが、ランダムな条件で動作しているために、其の後の確認と修正作業が大変です。長時間経過してから不具合にキズクのも稀ではありません。
設定の条件など「テキスト表示」すると「間違いに気づき易い」ので、私の場合は利用します。



//EDIT用、状況をテキスト表示
//text_set("MT/"+moveType+" DNo."+disposition_no);

「分割アニメ」の stage.update

「分割アニメ」の stage.update() ですが、アニメーション毎に EventListener を設定する方式でなく、このJSでは事前にリスナーを設定しています。
よって、画像の分割は必ず、toDataURL() を使用しない方法で行います。



//Main-Ticker設定
createjs.Ticker.setFPS(30);
//createjs.Ticker.timingMode=createjs.Ticker.RAF;
createjs.Ticker.addEventListener('tick',tick);

【重要】toDataURL()を利用しない方法で処理すること、toDataURL()を利用すると Firefox IE9 で画像切り替えが乱れて見れない状態になる。



//トリミング
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]);
//Canvasエレメントを保存
srcArr[k]=sliceCanvas;

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

其の後、Bitmap()で表示する

Canvasを角丸にする

Canvasを角丸にする場合はマスク処理は大変ですしブラウザにより綺麗に仕上がりませんので「CSS3」で処理します。当方のCanvas角丸処理しているCSSを参考にしてください。(DEMOの大半はCanvas角丸処理)



 

// 以下は、MENU関連の説明ですので、前ページと同様になります。//

 

画像読み込み失敗時のエラー処理

一番問題になるのは、画像読み込み失敗によってメニュー用の画像が表示されなくなり、リンクなどもズレてしまうことです(ほとんど無いと思うのですが?)。
読み込み失敗時のエラー処理で簡単な「代替画像」を挿入しますので、リンクのズレはありません。

登録色グラデーションの「Canvasエレメント」を作り画像の代用としています。



//エラー処理
function loaderror(eventObject) {

	//エラーの場合代替画像を作りassets容器に格納
	//var img=createColorCanvas (canvasWidth,canvasHeight,"#FFFFFF");//ベタ
 	var img=createLineGradBox (canvasWidth,canvasHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
	assets.push(img);
}

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

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	略す

	return canvas;
}


リンク用ボタンの表示

指定ページにジャンプするための簡単な「ボタン」です。勿論画像そのものにもリンクのアクションを設定できます。



//模擬ボタンを作りリンクを有効にする
var linkUse=true;//false true

Clickアクションの処理も、使用者用にあわせてください。

現在デモのために、javascript:void(0) をセットしています。削除ください。


//Go-btn-Clickアクション/noは未使用
function gobtn_handleclick (event,no) {

	//登録リンクデータ
	//var url="/main/html/" + link_url[image_no];//有効にすること

	var url="javascript:void(0)";//削除のこと

	//ウィンドウに出力
	location.href=url;

}

案内文を表示する

事前に「案内文」を登録して置きます。表示領域に表示されます。



//案内文を表示する
infortextUse=true;//false true

//案内文
var info_text=[
"POPS-WEB Blog ページに進みます",
"POPS-WEB Index ページに進みます",
"POPS-WEB Service ページに進みます",
"POPS-WEB Links ページに進みます",
"POPS-WEB Download ページに進みます",
"POPS-WEB Map ページに進みます"
];

矢印つきサムネール画像

このJSでは「矢印つきサムネール」の表示に限定しました。

 

矢印つきの形は、Graphicsクラスの「拡張形」で処理しています。白のラインつきまたはラインなしが選定できます。
「外側ラインなし」または「外側白ラインつき」、どちらかを有効にしてください。


graphicsの書き方は、下記のような処理方法が問題が発生しに難いのでベターであると思いますが、処理方法は多数ある(前ページに記載)のでどれが一番良い方法であるかワタシには判らない。


「矢印つき」は、Graphicsクラス拡張の独自関数 arcToBalloonEx() で処理しています。単に外形のパス形状を描画しているだけですが、通常のgraphicsの書き方が出来るのが利点です。


サムネール画像の入れ替えは、下記、例の様に書いてください。他にも書き方はありますが、Graphicsクラス拡張での処理を行っています....
注意、Graphics処理のスクリプトの書き方如何ではエラーで処理できない場合があります。



//arcToフキダシBOX
//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
function openThumbBoxEx(no) {

	//サムネール画像書き換え/画像result取得
	hoverthumb.graphics.clear();

	//外側ラインなしEx
	//hoverthumb.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//外側ライン有りEx
	hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

	hoverthumb.alpha=0;
	hoverthumb.visible=true;
	thumb=true;
}

フキダシはarcTo形式で処理しました。CreateJS Graphicsクラスの記述でかいています(かゆいときにはムヒ)。


//arcToフキダシBOX拡張arcToEx形式
//x,y,幅,高さ,半径,矢幅,矢高さ
createjs.Graphics.prototype.arcToBalloonEx=function(x,y,w,h,r,tw,th){
	this.moveTo(x+w/2,y)
	.arcTo(x+w,y,x+w,y+h,r)
	.arcTo(x+w,y+h,w/2+tw/2,y+h,r)
	.lineTo(x+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,y+h)
	.arcTo(x,y+h,x,y,r)
	.arcTo(x,y,x+w/2,y,r)
	.lineTo(x+w/2,y)
}

Linkボタンの変更(GOボタン)

どうしても必要なものではありませんが表示する場合の参考です。以下の様にしていますので必要であれば変更ください。デザイン変更などの書き換えなどは自由です。ラベルは現在「GO」になっています。
「クリックアクション」を削除すれば、模擬ボタンになります。画像に「クリックアクション」を設定すれば良い訳です。
下側は「案内文」表示の設定ですので、移動の際は適当に配置ください。



//Go-btn設置/模擬ボタン
if(linkUse) {

	//リンクコンテナ
	linkcontainer=new createjs.Container();
	//BTN
	linkBtn=createShapeBtn2(0,0,60,20,5,"GO","12px","#FFFFFF","#FF69B4",0);//変更可能
	linkBtn.x=canvasWidth-60;
	linkBtn.y=25;
	//linkBtn.shadow=shadow;//陰影
	//TEXT
	infortext=new createjs.Text("","13px Arial","#FFFFFF");
	infortext.textAlign="right";
	infortext.x=canvasWidth-100;
	infortext.y=15;
	infortext.shadow=shadow;
	linkcontainer.addChild(infortext,linkBtn);

	//クリックアクション/番号は仮
	linkBtn.on("click",gobtn_handleclick,null,false,image_no);//不要なら削除する
	stage.addChild(linkcontainer);
	linkcontainer.visible=false;
}

現在「デモ」では「模擬ボタン」に「クリックアクション」、下画像はアクションなしの状態です。


現在、角丸ボタン、外側ラインは2ピクセル幅、白に固定していますので、必要があれば修正ください。


//create-Shape模擬ボタン
function createShapeBtn2 (x,y,w,h,r,label,size,lc,backcolor,no) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var shape=new createjs.Shape();
	//Fill
	shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
	shape.regX=w/2;
	shape.regY=h/2;

	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";
	btn.addChild(shape,tx);

	//rollover
	btn.addEventListener("rollover",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill("#DAA520").drawRoundRect(x,y,w,h,r);
		//stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
		//stage.update();
	});

	return btn;
}

当方の参照記事など

このJSは、前ページのJSを改造しました。

【参照】当方の記事: CreateJS 大型画像スライドMENU 2


使用画像

原則、画像は使用者が用意します。1000x250 使用画像はデモページにあります。



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


[ この記事のURL ]


 

ブログ記事一覧



[1]