POPSブログ

CreateJS 大型画像Transition MENU

306

  Category:  javascript2014/06/15 pops 

大型画像の Transition Mask 形式の画像エフェクトと「MENU」の組み合わせです。原則、正方形で構成しますが、円形、角丸四角形、四角形のマスクが可能です。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

 

CreateJS 大型画像Transition MENU 4 テスト

ステージ内にマウスが入れば操作ボタンなどが表示されます。基本的にはタイマーで自動で画像コマ送りされますが、途中ボタンで任意の画像を表示できます。リンクボタン、画像「クリック」で別ページにジャンプの設定可能です。
Transitionは「CreateJS TransitionMask 画像を複数の分割Shape()でマスク処理してアニメ表示する」をベースに改造したものですので、MENU部分は基本的には「CreateJS 大型画像スライドMENU 2」ページなどを参照ください。


 

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


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


DEMO


CreateJS 大型画像Transition MENU のデモ、(createJS090.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

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


//日本語
//createJS090.js
//TransitionMENU形式エラー処理
//ステージ1つのoverlayタイプ

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

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

//最初の画像表示までの遅延時間
var wait_time=500;//0-8000
//アニメ速度
var mask_speed=800;//Shapeマスク速度 600-1000
var delay_speed=150;//出現間隔、delay基準時間 100-200

//ボタンを作る
var clickbtnUse=true;//true false

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

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

//マスク設定----------------------------------------
//マスク自動分割 true false
var maskSplit_free=false;

//マスク自動分割でない場合の分割/奇数値がベター
var maskSplit_h=12;//標準の横方向分割数
var maskSplit_v=3;//標準の縦方向分割数
var maskSplit_all=maskSplit_h*maskSplit_v;

//デモ用/正方形または近似4角形のみ
var maskSplitHs=[20,12,12,20];//横40以下一応エラー処理済み
var maskSplitVs=[5,3,3,5];

//マスクスケール方向番号データ 0-3
var maskScales=[0,0,0,0,1,2,3];
//マスク回転データ、回転は120度x回転データ
var maskRotates=[0,0,1,1,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 maskChip_W=[],maskChip_H=[],maskChip_pos_X=[],maskChip_pos_Y=[];
//実際配置位置
var set_maskpos_X=[],set_maskpos_Y=[];
//移動配置位置
var mov_maskpos_X=[],mov_maskpos_Y=[];
//マスクスライスObject容器
var maskChip=[];
var maskkcount=0;
//速度変更用
var shapemask_speed=mask_speed;
//MASK-IMAGE
var img_st=[];
var maskalpha=false;

//色付き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

	//最初の画像表示遅延
	setTimeout(function() {

		draw();//画像表示

	},wait_time);

}

//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クリア
	text_set("");

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

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

	globalflag=false;//未使用
	//カウントクリア
	maskkcount=0;

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

	//keep値が無ければ強制IN
	if (!keep_mainImage) {inType=true;}

	//INの場合画像result取得
	if (inType) {
		mainImage=assets[image_no];
	} else {
		//OUTの場合画像keep.result取得
		mainImage=keep_mainImage;
	}
	//保存
	keep_mainImage=assets[image_no];

	var splitNo=0;
	//マスク分割変更
	if (maskSplit_free) {
		splitNo=Math.floor(Math.random()*maskSplitHs.length);
		//分割値代入
		maskSplit_h=maskSplitHs[splitNo];
		maskSplit_v=maskSplitVs[splitNo];
	}

	//マスクスライス寸法データを得る
	sliceMask_set(canvasWidth,canvasHeight,maskSplit_h,maskSplit_v);
	//分割合計要素数計算
	maskSplit_all=maskSplit_h*maskSplit_v;

	//moveTypeマスクの形状種類
	moveType=Math.floor(Math.random()*3);

	//マスクChip
	maskChip=[];
	//MASK-IMAGE
	img_st=[];
	//カスタムマスクChip
	var customChip=false;
	//カスタムマスク拡大率
	var rate_v=1;

	var spd_v=1;
	//アニメ速度マスク速度/速度変更用初期値
	shapemask_speed=mask_speed;
	//分割数が多い場合早く75%
	if(maskSplit_all > 60) {spd_v=0.75;shapemask_speed *=0.75;}

	//マスク要素を作る/moveTypeで分類
	var k=0;
	for (var i=0; i < maskSplit_h; i++) {
		for (var j=0; j < maskSplit_v; j++) {

			//shape
			maskChip[k]=new createjs.Shape();
			
			maskChip[k].width=maskChip_W[k];
			maskChip[k].height=maskChip_H[k];
			maskChip[k].id=k;
			//中央補正/分割保存値を使用のこと
			maskChip[k].regX=maskChip_W[k]/2;
			maskChip[k].regY=maskChip_H[k]/2;

			//Circle
			if (moveType == 0) {
				//maskChip[k].graphics.beginFill().drawCircle(maskChip_W[k]/2,maskChip_H[k]/2,maskChip_W[k]/2);//円
				maskChip[k].graphics.beginFill().drawEllipse(0,0,maskChip_W[k],maskChip_H[k]);//だ円のほうが良い
				rate_v=1.5;//拡大率
				customChip=true;
			}
			//RoundRect
			if (moveType == 1) {
				maskChip[k].graphics.beginFill().drawRoundRect(0,0,maskChip_W[k],maskChip_H[k],10);//通常角丸
				rate_v=1.2;//拡大率
				customChip=true;
			}
			//Rect
			if (moveType > 1) {
				maskChip[k].graphics.beginFill().drawRect(0,0,maskChip_W[k],maskChip_H[k]);
			}

			k++;
		}
	}

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

	//多目的判定用/未使用もあり
	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()*8);
//delay_no=3;
	//delayed遅延させる/20%
	var delayed=Math.floor(Math.random()*5);

	//透明度
	var alpha_no=Math.floor(Math.random()*2);

	//配置disposition位置
	var disposition_no=Math.floor(Math.random()*3);
	var disposition_X=0;
	var disposition_Y=0;

	//スケール方向番号
	var scale_no = maskScales[Math.floor(Math.random()*maskScales.length)];
	var scale_X=0;
	var scale_Y=0;

	//回転データ取得
	var rotate=maskRotates[Math.floor(Math.random()*maskRotates.length)];

	//ひねりskew確率33%
	var skew_no=Math.floor(Math.random()*3);
	var skewx_v=0;
	var skewy_v=0;
	var skewflag=false;//判定
	//splitNo 0-2に処理
	if (skew_no == 1 && splitNo < 3) {
		skewflag=true;
		rotate=0;//回転0
		var skewx_v=90*(chgflag2-1)*chg_v;
		var skewy_v=90*chg_v*-1;
	}

	//カスタムマスク強制透明度補正
	//if (customChip) {alpha_no=0;}

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

	//配置条件設定
	flag3=1;
	var k=0;
	for (var i=0; i < maskSplit_h; i++) {
		for (var j=0; j < maskSplit_v; j++) {

			//戻り位置計算
			set_maskpos_X[k]=maskChip_pos_X[k]+maskChip_W[k]/2;
    			set_maskpos_Y[k]=maskChip_pos_Y[k]+maskChip_H[k]/2;

			//移動加算値等の計算
			switch(disposition_no){
				case 0://その場所で
					disposition_X=set_maskpos_X[k];
					disposition_Y=set_maskpos_Y[k];
					//スケール補正
					scale_no=0;
				break;
				case 1://ずらす
					disposition_X=set_maskpos_X[k]+(maskChip_W[k]/4*chg_v*chgflag);
					disposition_Y=set_maskpos_Y[k]+(maskChip_H[k]/4*chg_v*chgflag);
					scale_no=0;
				break;
				default://そのほかその場所
					disposition_X=set_maskpos_X[k];
					disposition_Y=set_maskpos_Y[k];
					alpha_no=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;
				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;}

			//カスタムマスクChip拡大補正
			var outscale_X=1;
			var outscale_Y=1;
			//拡大率rate設定
			if (customChip) {outscale_X=rate_v;outscale_Y=rate_v;}

			//初期の移動
			//IN
			if (inType) {
				mov_maskpos_X[k]=disposition_X;
				mov_maskpos_Y[k]=disposition_Y;
				maskChip[k].x=mov_maskpos_X[k];
    				maskChip[k].y=mov_maskpos_Y[k];
				maskChip[k].rotation=rotate_v[k];
				maskChip[k].scaleX=scale_X;
				maskChip[k].scaleY=scale_Y;
				maskChip[k].alpha=1;//1
				//skew
				if (skewflag) {
					maskChip[k].skewX=skewx_v;
					maskChip[k].skewY=skewy_v;
				}
			}

			//OUT
			if (!inType) {
				mov_maskpos_X[k]=disposition_X;
				mov_maskpos_Y[k]=disposition_Y;
				maskChip[k].x=set_maskpos_X[k];
    				maskChip[k].y=set_maskpos_Y[k];
				//初期の条件
				maskChip[k].rotation=0;
				maskChip[k].scaleX=outscale_X;//カスタム補正
				maskChip[k].scaleY=outscale_Y;
				maskChip[k].alpha=1;//1
				//skew
				if (skewflag) {
					maskChip[k].skewX=0;
					maskChip[k].skewY=0;
				}
			}

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

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

	//delayの計算/spd_v乗算
	var sh=maskSplit_h-1;
	var sv=maskSplit_v-1;
	var flag3=1;
	var kk=0;//方向違いカウント
	var kkk=0;//半分でカウントダウン
	var k=0;
	for (var i=0; i < maskSplit_h; i++) {
		for (var j=0; j < maskSplit_v; j++) {

			//縦方向にカウント
			kk=i*maskSplit_v+j;
			kkk=k;

			if (delay_no == 0) {delay_st[k]=kkk*0.5*delay_speed*spd_v;}
			if (delay_no == 1) {delay_st[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*2*delay_speed*spd_v;}//円形状外から中心に
			if (delay_no == 2) {delay_st[k]=(Math.abs(i-(sh/2))-Math.abs(j-(sv/2)))*3*delay_speed*spd_v;}//対角組あわせX状に
			if (delay_no == 3) {delay_st[k]=(Math.abs(i-(sh/2)))*2*delay_speed;}//縦状中より左右に
			if (delay_no == 4 || delay_no == 5) {delay_st[k]=(i+(maskSplit_v-j))*delay_speed*spd_v;}//標準斜め2
			if (delay_no > 5) {delay_st[k]=(i+j)*delay_speed*spd_v;}//標準斜め


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

			k++;
			flag3 *=-1;

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

	//画像配置と初期画像透明度
	var k=0;
	for (var i=0; i < maskSplit_h; i++) {
		for (var j=0; j < maskSplit_v; j++) {

			img_st[k]=new createjs.Bitmap(mainImage);
			img_st[k].mask=maskChip[k];
			if (inType) {img_st[k].alpha=alpha_no;}
			if (!inType) {img_st[k].alpha=1;}
			container.addChild(img_st[k]);

			k++;
		}
	}

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

	//maskされた画像の透明度を変えるか
	maskalpha=false;
	if (alpha_no == 0) {maskalpha=true;}

	//OUTの場合下画像を入れる
	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 < maskSplit_h; i++) {

		for (var j=0; j < maskSplit_v; j++) {

			if (inType) {
				params={x:set_maskpos_X[k],y:set_maskpos_Y[k],scaleX:outscale_X,scaleY:outscale_Y,rotation:0,skewX:0,skewY:0};
				img_st[k].alpha=alpha_no;
				
			}
			if (!inType) {
				params={x:mov_maskpos_X[k],y:mov_maskpos_Y[k],scaleX:scale_X,scaleY:scale_Y,rotation:rotate_v[k],skewX:skewx_v,skewY:skewy_v};
				img_st[k].alpha=1;
			}

			var tween=createjs.Tween.get(maskChip[k])
			.wait(delay_st[k])
			.call(alphachg)
			.to(params,shapemask_speed,ease)
			.to({rotation:0},1)
			.call(finshMasktween);

			k++;

		}
	}
}

//マスクスライスalphaTween
function alphachg (event) {
	if (!maskalpha) {return}
	var twn=createjs.Tween.get(img_st[this.id]);
	if (inType) {
		twn.to({alpha:1},shapemask_speed);
	}
	if (!inType) {
		twn.to({alpha:0},shapemask_speed);
	}
}

//マスクスライス要素の位置大きさ決定、保存
function sliceMask_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);
	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++) {
			//大きさ保存
			maskChip_W[k]=slice_W;
			if (i == slh-1) {maskChip_W[k]=slice_Wb;}
			maskChip_H[k]=slice_H;
			if (j == slv-1) {maskChip_H[k]=slice_Hb;}
			//位置保存中央補正前
			maskChip_pos_X[k]=(slice_W*i);
			maskChip_pos_Y[k]=(slice_H*j);
			k ++;
		}
	}
}

//マスク個別のアニメ完了
function finshMasktween () {

	//全て完了
	if(maskkcount == maskSplit_all-1) {
		//画像alpha処理調整
		setTimeout(function(){
			finshAll();
		},200);
	}
	//0からカウント加算
	maskkcount ++;
}

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

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

	//removeAllTweens必要なら
	createjs.Tween.removeAllTweens();

	//MASK解除
	for (var i=0; i < maskSplit_all; i++) {
		img_st[i].mask=null;
	}

	//上画像コンテナの中を削除
	container.removeAllChildren();

	//クリア
	maskkcount=0;

	//画像処理に時間がかかるので、少し遅延させる、あったほうが良い
	setTimeout(function(){

		globalflag=true;//重要

		//Go-btn表示
		if(linkUse) {
			//テキスト交換
			if(infortextUse) {infortext.text=info_text[image_no];}
			//linkBtnコンテナ
			linkcontainer.visible=true;
		}
		//AUTO
		if (timer_use == 'use') {
			text_set("AUTO");
			set_timer();
		}

	},500);

}

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

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

}
//前の開く要素を計算
function prev_set() {
text_set("PREV");
	//タイマー切
	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文字書き換え
		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

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


/*日本語 createJS090.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 大型画像Transition MENU 4

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


1. 大型画像用途で、MENU兼用になります。(MENUとして利用しない設定もOK)
但し「MENUとして使用できないことはない」と言う程度のものです
2. LINK用のボタンを表示できます。また画像に直接アクションを設定可能です。
3. ボタンHOVERで、該当のサムネール画像を表示できます。(サムネールはShapeで単純化)
4. 円形、角丸四角形、四角形のマスクがランダムに設定されます。(移動は少ない)
5. 「説明案内文」など1行のみTEXT表示が可能です。
6. 既存のTEXT表示がありますので、利用が可能です。
7. 画像読み込み失敗時、代替画像挿入の「エラー処理」を行いました。
8. 注意、Chromeでのマスクされた画像は大変見苦しい。(そのほかは綺麗です)
9. 詳細は、JS上部を参照ください。


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

 

 

Mask形状による違い

Mask形状により、以下の様に分類して、移動せず其の場所でのエフェクトが主のアニメを実行しています。
画像分割ではなく「マスクの範囲内の表示」になりますが、余り見た目では区別出来ない場合もあります。

 

1. Circle、円形楕円形でのマスク、其の場所でのエフェクトが主。
2. RoundRect、角丸四角形。
3. Rect、四角形。


画像の大きさ

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



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

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


上画像層と下画像層

 

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


1. マスク材は正方形に作られ円、角丸などが graphics で描画されます。
(4角形以外の角丸形などは必ず「マスク漏れ」が生じますのでマスクを拡大して修正します、上図参照)
2. 大きな1枚画像をマスク材でマスクされます。両方1組で「マスクした画像」になります。
(画像はトリミングしませんので、幾重にも大きな画像が重なっている事になりますが、意外と軽いので驚く)
3. マスク材は移動、伸縮などのTween処理をされます。画像は透明度のTween処理をされます。
(2つのTweenで処理を行っているのが特徴で、1つのTweenでは処理できません)


AlphaMaskFilterでの処理も可能と思いますが、試してはいません。


最初の画像を作る

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



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

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

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

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


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

分割の変更

原則、正方形、あるいは「近似4角形」になるように分割します。マスク処理で4隅に不具合が出る場合は拡大率を調整します。(角丸は角丸半径を調整しても良い)
長方形などの設定は出来ない訳でもありませんが綺麗にならない。同じ設定が複数あれば出現確率がまします。



//デモ用/正方形または近似4角形のみ
var maskSplitHs=[20,12,12,20];//横40以下一応エラー処理済み
var maskSplitVs=[5,3,3,5];

奇数値で分割したほうが綺麗なパターンになるが、上記では「正方形」にしている。(全体の大きさに左右されるのでこの辺は随意)


● 拡大率を調整

下は楕円の例ですが、分割された大きさにgraphics描画されますので、拡大率を調整します。
customChip=trueは、通常の拡大と区別するための判定子です。
graphics描画をかえれば、いろいろな形にする事が可能で、マスク漏れが出るならば拡大率で調整すればよい。



//Circle
if (moveType == 0) {
	//maskChip[k].graphics.beginFill().drawCircle(maskChip_W[k]/2,maskChip_H[k]/2,maskChip_W[k]/2);//円
	maskChip[k].graphics.beginFill().drawEllipse(0,0,maskChip_W[k],maskChip_H[k]);//だ円のほうが良い
	rate_v=1.5;//拡大率
	customChip=true;
}

Mask形状違いの出現確率

現在、Mask形状は Circle、RoundRect、Rect、の3種類ですので均等になるようにしています。
3 以上にすれば Rect の確率が増えます。



//moveType
moveType=Math.floor(Math.random()*3);

アニメの時間(速度)

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



//アニメ速度
var mask_speed=800;//Shapeマスク速度 600-1000
var delay_speed=150;//出現間隔、delay基準時間 100-200

カスタムマスク強制透明度補正

通常の透明度設定の確率は50%になります。Mask形状 Circle、RoundRect の透明度を強制的に変化させる場合は、下記を有効にする。
画像に重なりの模様がついて綺麗に表現されます。(実行パターンによってはさほど綺麗にならない時もある)



//カスタムマスク強制透明度補正
//if (customChip) {alpha_no=0;}

時間短縮

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



var spd_v=1;
//アニメ速度マスク速度/速度変更用初期値
shapemask_speed=mask_speed;
//分割数が多い場合早く75%
if(maskSplit_all > 60) {spd_v=0.75;shapemask_speed *=0.75;}

--------------------------------------------------------------------------------
spd_v処理

//delayの計算/spd_v乗算

if (delay_no == 0) {delay_st[k]=kkk*0.5*delay_speed*spd_v;}

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


スケール方向と回転

マスク材は画像分割と同じ方法なので、スケール方向と回転も同じ処理をした。回転はマスク範囲の回転で有り、画像は回転しません。



//マスクスケール方向番号データ 0-3
var maskScales=[0,0,0,0,1,2,3];
//マスク回転データ、回転は120度x回転データ
var maskRotates=[0,0,1,1,1,2,3];

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


パターンは少ない

マスク要素を移動しないで、其の場所でのエフェクトが多いために、パターンは極端に少ない。移動させての実行も可能ですがこの辺は自己責任で改造ください。パターンは「画像分割アニメ」のものがそのまま使用可能です。


移動が少ない理由

画像分割と違い、移動させてもそれなりの効果はありませんのでほとんど同じ位置でエフェクトさせていますので、同じ位置の場合「拡大縮小」「透明度変化」の選択肢のみになります。
一部、ひずみ skew を与えて変化させましたが、設定は「いい加減適当」です。


最初の画像表示遅延

TOPページなどは、装飾、表示画像などが比較的多いので、ページ全体の表示などに結構がかかります。其の間にMENUのページが進むおそれがあります。
遅延させれば、MENU第1ページ表示タイミングにあわせることが出来ます。其の間に別画像を表示する事も可能。


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は、下記ページのMENU部分を使用しアニメ部分を取り替え改造しました。

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


使用画像

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



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

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]