POPSブログ

CreateJS 画像分割とTransitionMask等を組み合わせてアニメ表示する2、番外編

264

  Category:  javascript2013/12/09 pops 

複数の形状の違う画像分割とTransitionMask等多数を組み合わせた 番外編です。1枚画像スライド、ダブルスライド、レーダーエフェクトなどを加えました。かなり「重体お病気系エフェクト」ですが、CreateJSが進化すればモット「エフェクト」が増えるでしょうから危篤状態も間近です。ボタンで任意に画像を読み込み表示する形式で作りました。
easeljs-0.7 でのテストです。

 

CreateJS 画像分割とTransitionMask等を組み合わせてアニメ表示する2、番外編テスト


種類は多いが皆同じ様に見える。果たして意味が在るんでしょうか?、疑問に思います。
Flashで実現しているものばかりなので、新鮮味がないのが原因でしょうか?
ボタンで任意に画像を読み込み表示する形式で作りましたが「デモ」ではボタンを表示(使用)していません。


[説明図]

 

DEMO


CreateJS 画像分割とTransitionMask等を組み合わせてアニメ表示する2、番外編デモ、(createJS049.js)

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


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


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

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


HTML (HTML5)


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

JS

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


//日本語
//createJS049.js
//画像分割マスク分割組Transition任意画像ロード
//easeljs-0.7用

//------------------------------------------------------
//firefox判定
var userAgent = window.navigator.userAgent.toLowerCase();
var firefox=false;
if (userAgent.indexOf("firefox") > -1) {firefox=true;}

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

//Auto true false
var autoUse=true;
//タイマー値 5000-10000
var time=6000;
//ボタン使用、作る true false
var btnUse=false;
//TEXTの使用 true false
var textUse=true;

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

//アニメ速度 800-1500
var speed=1200;//スケールアニメ速度
var double_speed=1200;//ダブルスライド速度
var slice_speed=1200;//スライスアニメ速度
var shapemask_speed=1000;//Shapeマスク速度

//出現間隔 delay基準時間
var delay_speed=150;//100-200

//最初の画像表示までの遅延時間
var wait_time=3000;//3000-8000

//Blockの指定色
var blockcolor="#000000";

//画像リスト/manifestでは無い
var imagelist=[
	"/main/images/flower01.jpg",
	"/main/images/flower02.jpg",
	"/main/images/flower03.jpg",
	"/main/images/flower04.jpg",
	"/main/images/flower05.jpg",
	"/main/images/flower06.jpg"
];


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

//自動分割 原則自動のこと true false
var split_free=true;

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

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

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

//4DOOR、変更しない事/未使用
var door4x=[-0.5,-0.5,1.5,1.5];
var door4y=[-0.5,1.5,-0.5,1.5];

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

//最初の画像0のこと
var image_no=0;
//画像登録数
var image_max=imagelist.length;
//対角の円半径
var radius_gl=Math.ceil(Math.sqrt(canvasWidth*canvasWidth+canvasHeight*canvasHeight)/2);

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

//ステージ
var stage,stage2;
//コンテナ
var welcomecontainer;
var backcontainer;
var container;
//画像result
var globalflag=false,topImage,backImage,mainImage,keep_mainImage,welcomeImage,timerID=null;
//画像保存
var keep_mainImage;
//エラー画像
var errorImage;
//マスクBOX
var maskbox;
var overImage;
var secterMask;
//Loading
var loadingShape;
//TEXT
var viewtext;
//ボタン
var btncontainer;
var myhitBtn=[];

//読み込み画像URL保存容器
var assets=[];
//
var inType=true;
var moveType="scale";
var move_name=["scale","scale","scale","scale","mask","mask","mask","angle","sectermask","block","double","slice","slice","shapemask","shapemask"];
//var move_name=["scale","mask","angle","sectermask","block","double","slice","shapemask"];
//var move_name=["block","slice","shapemask"];

//位置スケールデータ 1.5倍あり
var scales_X=[1.5,1, -1,1, 1,1,0,0, 0,0,0];
var scales_Y=[1.5,1, 1,-1, 0,0,1,1, 0,0,0];
//                        slide     diagonal
var pos_sx=  [0,  0,0,0,  0,0, 1,1, 1,-1];
var pos_sy=  [0,  0,0,0,  1,1, 0,0, 1,1];

//マスク位置スケールデータ
var pos_sx3=  [0,0,0, 0,0, 0,0,1,-1, 1,1,-1,-1, 0,0,1,-1];
var pos_sy3=  [0,0,0, 0,0, 1,-1,0,0, 1,-1,1,-1, 1,-1,0,0];
var scales_X3=[0,0,0, 0,1, 1,1,1,1,  1,1,1,1,   0,0,1,1];
var scales_Y3=[0,0,0, 1,0, 1,1,1,1,  1,1,1,1,   1,1,0,0];
var pos_no_v=0;

//分割大きさ位置保存容器
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=[];
var kcount=0;

//MASK-IMAGE
var img_st=[];
var maskalpha=false;

//変数
var globalflag=false;//未使用
var timerID=null;
//クリック停止判定
var stopClick=true;
//welcome画像読み込み判定
var welcomeflag=false;
var welcome_result;
var once=true;//double重要
//
var keep_speed=speed;
var keep_slicespeed=slice_speed;
var keep_shapemaskspeed=shapemask_speed;
//
var blockcount=0;
var delay_block=[];
var block2Type=0;

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

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

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

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

	if (btnUse) {
		stage2=new createjs.Stage('subCanvas');
		//MouseOver設定/必要に応じ設定
		stage2.enableMouseOver(20);
	}

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

	//welcome画像層画像表示
	welcomecontainer=new createjs.Container();
	//welcome画像挿入
	if (welcomeflag) {
		welcomeImage=new createjs.Bitmap(welcome_result);
	} else {
		var gradient_data={x0:0,y0:canvasHeight/2,x1:0,y1:0};
		welcome_result=createGradientCanvas2 (canvasWidth,canvasHeight,"#DB7093","#FFFFFF",gradient_data,true,"Arial","bold 50px","#FFFFFF","WELCOME");
		welcomeImage=new createjs.Bitmap(welcome_result);
	}
	welcomecontainer.addChild(welcomeImage);
	stage.addChild(welcomecontainer);
	stage.update();

	//welcome画像保存
	keep_mainImage=welcome_result;

	//下画像層、空画像コンテナを作る/寸法設定なくともOK
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);
	
	//上画像層のみ作る
	container=new createjs.Container();
	stage.addChild(container);

	//LOADINGを作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//ステージに貼り付けtickを分離
	stage.addChild(loadingShape);
	loadingShape.visible=false;

	//簡易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);

	//角丸ボタン
	if (btnUse) {

		//containerステージ2
		btncontainer=new createjs.Container();
		btncontainer.x=60;
		btncontainer.y=20;
		stage2.addChild(btncontainer);
		btncontainer.visible=false;
		//角丸ボタンを作る
		roundRectBtns(image_max);

	}

	//上が白で下が、指定色のグラデーション代替画像を作る
	var gradient_data={x0:0,y0:canvasHeight/2,x1:0,y1:0};
	//幅、高さ、色、色2、DATA、フォント作る、文字種、サイズ、文字色、ストリング
	errorImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#000000","#FFFFFF",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE");
	
	//色付きcanvas
	//errorImage=createColorCanvas (canvasWidth,canvasHeight,"#000000");

	stage.update();
	set_text("START");

	//表示までの調整
	setTimeout(function() {

		//btncontainer表示
		if (btnUse) {btncontainer.visible=true;}
		stage.update();
		//任意画像ロードに進む
		imageload();

	},wait_time);

}

//任意画像ロード
function imageload () {

	stopClick=true;

	set_text("Loading Now!");
	//Loading
	set_loading();
	//Loader
	var imgLoader=new Image();
	//画像URL-SET
	imgLoader.src=imagelist[image_no];
	//ONLOAD
	imgLoader.onload=function () {

		set_text("Loaded");
		//Loading
		reset_loading();

		mainImage=imgLoader;
		assets[image_no]=mainImage;//保存

		//画像表示
		draw_image();

	};
	//ERROR代替画像挿入
	imgLoader.onerror=function () {

		//Loading
		reset_loading();

		//ボタンラベルをNONEにする
		if (btnUse) {
			//name判定
			//var target=myhitBtn[image_no].getChildByName("btntext");
			//内部Child
			var target=myhitBtn[image_no].getChildAt(1);
			target.text="NONE";
			//target.text="×";
			//target.text="X";
		}

		//エラー画像
		mainImage=assets[image_no]=errorImage;//保存

		//画像表示
		draw_image();

	};

}

//Loading/重いためsetFPS(5)に変更
function set_loading() {
	//tickを設定
	createjs.Ticker.setFPS(5);
	createjs.Ticker.addEventListener('tick',loadingtick);
	loadingShape.visible=true;
}
function reset_loading() {
	loadingShape.visible=false;
	//tickを削除
	createjs.Ticker.removeEventListener('tick',loadingtick);
}

//クリック処理
function handleclick (event,no) {

	//Loadingアニメ中stopClick
	if (stopClick) {return}
	//同じ番号は機能しない
	if (image_no == no) {return}

	//AUTO解除
	if(autoUse) {
		clearTimeout(timerID);
	}
	set_text("HIT "+no);

	//画像番号
	image_no=no;

	//画像保存値が有るか/ブラウザにより効率が悪いので
	if (assets[image_no]) {
		//保存値利用
		mainImage=assets[image_no];
		stopClick=true;
		draw_image();
	} else {
		//任意画像ロード
		imageload();
	}

}

//アニメ分岐
function draw_image() {

	//activeボタン、ラベル色変更
	if (btnUse) {
		for (var i=0; i < image_max; i++) {
			var target=myhitBtn[i].getChildAt(1);
			//var target=myhitBtn[i].getChildByName("btntext");
			target.color=(i == image_no) ? "#FF0000":"#FFFFFF";
		}
		stage2.update();
	}

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


//inType=false;
//inType=true;


	//moveType決定 scale mask double slice
	moveType=move_name[Math.floor(Math.random()*move_name.length)];


//moveType="scale";
//moveType="double";
//moveType="mask";
//moveType="angle";
//moveType="slice";
//moveType="shapemask";
//moveType="block";
//moveType="sectermask";


	//TEXT
	set_text("IMAGE "+(image_no+1));

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

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

	//コンテナ中央調整
	var container_center=false;
	//コンテナ中央
	if (moveType == 'scale' || moveType == 'mask' || moveType == 'angle') {container_center=true;}
	if (container_center) {
		//コンテナ中央
		container.x=canvasWidth/2;
		container.y=canvasHeight/2;
	} else {
		//コンテナ00
		container.x=0;
		container.y=0;
	}

	//処理に進む
	switch(moveType){
		case "scale":
			scale_anime();
		break;
		case "mask":
			mask_anime();
		break;
		case "angle":
			mask_anime();
		break;
		case "sectermask":
			sectermask_anime();//扇形
		break;
		case "double":
			doubleslide_anime();
		break;
		case "slice":
			slice_anime();
		break;
		case "shapemask":
			slice_anime();
		break;
		case "block":

			slice_anime();
		break;
		default:
			scale_anime();
	}

}

//scale slide puffアニメ
function scale_anime() {

	overImage=new createjs.Bitmap();

	//クリア
	var movepos_X=0;
	var movepos_Y=0;
	var scale_X=0;
	var scale_Y=0;
	var rotation_v=0;
	var alpha_no=0;
	//対角判定未使用
	var diagonal=false;
	//多目的用
	var chgflag=Math.floor(Math.random()*3);

	//上画像を作る
	if (moveType == 'scale') {
		topImage=new createjs.Bitmap(mainImage);
	}
	
	//逆転フラグ
	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;}
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	//多目的用3
	var chgflag3=Math.floor(Math.random()*5);

	//回転
	var rot_no=Math.floor(Math.random()*4);
	//スケール方向番号
	var scale_no=Math.floor(Math.random()*scales_X.length);

	//透明度
	var alpha_no=0;
	//回転補正30% スライドでは無し
	if (chgflag > 0) {rot_no=0;}
	//位置
	var pos_no=Math.floor(Math.random()*pos_sx.length);

	//強制スライド 回転スケール補正
	if(pos_no > 3) {
		scale_no=1;alpha_no=1;rot_no=0;
	}
	//パフ補正 中心位置でFADE
	if (scale_no == 0 && moveType == 'scale') {
		pos_no=0;alpha_no=0;rot_no=0;
		moveType='puff';//拡張

	}

	//中央補正
	topImage.regX=canvasWidth/2;
	topImage.regY=canvasHeight/2;

	//5位置に拡張
	if (moveType == 'puff') {
		var scl_v=(scales_X[0]-1)/2;
		rot_no=0;alpha_no=0;
		movepos_X=canvasWidth*scl_v*chg_v*(chgflag-1);
		movepos_Y=canvasHeight*scl_v*chg_v2*(chgflag-1);
		scale_X=scales_X[0];
		scale_Y=scales_Y[0];
	}

	if (moveType == 'scale') {
		//計算
		rotation_v=rot_no*90*chg_v;
		movepos_X=canvasWidth*pos_sx[pos_no]*chg_v;
		movepos_Y=canvasHeight*pos_sy[pos_no]*chg_v;

		scale_X=scales_X[scale_no];
		scale_Y=scales_Y[scale_no];
	}

	//IN 初期条件移動
	if (inType) {

		//上画像更新、透明度0
		topImage.alpha=0;
		topImage.rotation=rotation_v;
		topImage.x=movepos_X;
		topImage.y=movepos_Y;
		topImage.scaleX=scale_X;
		topImage.scaleY=scale_Y;
	}
	//OUT 初期条件
	if (!inType) {

		//上画像更新、透明度1
		topImage.alpha=1;
		topImage.rotation=0;
		topImage.x=0;
		topImage.y=0;
		topImage.scaleX=1;
		topImage.scaleY=1;
	}

	//addChild
	container.addChild(topImage);

	//クリア
	var params={};

	//OUTの場合下画像を入れる
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	if (inType) {
		params={x:0,y:0,scaleX:1,scaleY:1,rotation:0,alpha:1};
	} else {
		params={x:movepos_X,y:movepos_Y,scaleX:scale_X,scaleY:scale_Y,rotation:rotation_v,alpha:alpha_no};
	}

	//TWEENの実行
	var tw=createjs.Tween.get(topImage)
	.to(params,speed)
	.call(finshAll);

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

//maskアニメ
function mask_anime() {

	overImage=new createjs.Bitmap();

	//クリア
	var movepos_X=0;
	var movepos_Y=0;
	var scale_X=0;
	var scale_Y=0;
	var rotation_v=0;
	var alpha_no=0;
	//対角判定未使用
	var diagonal=false;

	if (moveType == 'mask') {

		var radius=radius_gl;
		//RoundRect無しは2にする
		var masktype=Math.floor(Math.random()*2);//2-3種類
		var mask_w=canvasWidth;
		var mask_h=canvasHeight;

		topImage=new createjs.Shape();
		//Rect
		if (masktype == 0) {topImage.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,canvasHeight);}
		//Circle
		if (masktype == 1) {
			topImage.graphics.beginFill("#FFFFFF").drawCircle(canvasWidth/2,canvasHeight/2,radius);
			mask_w=mask_h=radius*2;
		}
		//RoundRect
		if (masktype == 2) {
			topImage.graphics.beginFill("#FFFFFF");
			operaRoundRect(topImage,0,0,canvasWidth,canvasHeight,20);
			//operaRoundRect(topImage,-10,-10,canvasWidth+20,canvasHeight+20,20);//少し大きい
		}

		overImage.image=new createjs.Bitmap(mainImage).image;
		//中央補正
		overImage.regX=canvasWidth/2;
		overImage.regY=canvasHeight/2;

	}
	if (moveType == 'angle') {
		topImage=new createjs.Shape();
		//ズレが変だ補正
		topImage.graphics.beginFill("#FF0000").drawRect(canvasWidth/2-radius_gl,-radius_gl+canvasHeight/2,radius_gl*2,radius_gl*2);
		overImage.image=new createjs.Bitmap(mainImage).image;
		//中央補正
		overImage.regX=canvasWidth/2;
		overImage.regY=canvasHeight/2;
	}

	//逆転フラグ
	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;}
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	//多目的用
	var chgflag2=Math.floor(Math.random()*9);
	//多目的用3
	var chgflag3=Math.floor(Math.random()*5);

	//回転
	var rot_no=Math.floor(Math.random()*4);
	//スケール方向番号
	var scale_no=Math.floor(Math.random()*scales_X.length);

	//透明度
	var alpha_no=0;
	//回転補正30% スライドでは無し
	if (chgflag > 0) {rot_no=0;}
	//位置
	var pos_no=Math.floor(Math.random()*pos_sx.length);

	var before_angle=0;//強制角度
	var spd_v=1;//速度調整

	//中央補正
	topImage.regX=canvasWidth/2;
	topImage.regY=canvasHeight/2;

	if (moveType == 'angle') {
		scale_X=0;scale_Y=1;
		//計算/強制角度
		//中央
		if(chgflag < 2) {
			before_angle=(chgflag2+1)*10*chg_v;
			movepos_X=0;
			movepos_Y=0;
		}
		//左右30度限定
		if(chgflag > 1) {
			before_angle=30*chg_v;
			movepos_X +=canvasWidth*3/4*chg_v;
			movepos_Y=0;
		}
		spd_v=1.5;
	}

	//maskタイプ位置スケール補正
	if (moveType == 'mask') {

		pos_no=Math.floor(Math.random()*pos_sx3.length);
		//movepos_X=canvasWidth*pos_sx3[pos_no];
		//movepos_Y=canvasHeight*pos_sy3[pos_no];
		//共通
		movepos_X=mask_w*pos_sx3[pos_no];
		movepos_Y=mask_h*pos_sy3[pos_no];

		scale_X=scales_X3[pos_no];
		scale_Y=scales_Y3[pos_no];
		rotation_v=0;
		var rno=Math.floor(Math.random()*4);
		if (pos_no < 1) {rotation_v=rno*90*chg_v;}
	}

	//IN 初期条件移動
	if (inType) {

		//上画像更新、透明度0
		topImage.alpha=0;
		topImage.rotation=rotation_v+before_angle;
		topImage.x=movepos_X;
		topImage.y=movepos_Y;
		topImage.scaleX=scale_X;
		topImage.scaleY=scale_Y;
	}
	//OUT 初期条件
	if (!inType) {

		//上画像更新、透明度1
		topImage.alpha=1;
		topImage.rotation=before_angle;
		topImage.x=0;
		topImage.y=0;
		topImage.scaleX=1;
		topImage.scaleY=1;
	}

	//addChild
	container.addChild(topImage);

	if (moveType == 'mask' || moveType == 'angle') {
		topImage.alpha=1;
		container.addChild(overImage);
		overImage.mask=topImage;
	}

	//クリア
	var params={};

	//OUTの場合下画像を入れる
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	if (inType) {
		params={x:0,y:0,scaleX:1,scaleY:1,rotation:before_angle,alpha:1};
	} else {
		params={x:movepos_X,y:movepos_Y,scaleX:scale_X,scaleY:scale_Y,rotation:rotation_v+before_angle,alpha:alpha_no};
	}

	//TWEENの実行
	var tw=createjs.Tween.get(topImage)
	.to(params,speed*spd_v)
	.call(finshAll);

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

//sectermaskアニメ
function sectermask_anime() {

	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}
	//自動条件配列
	var sectersplit=[1,2,3,4,6];
	var stepArr=[10,5,3,3,2];
	//mask
	secterMask=new createjs.Shape();
	secterMask.graphics.beginFill().drawCircle(0,0,2);//仮
	secterMask.regX=-canvasWidth/2;
	secterMask.regY=-canvasHeight/2;

	//描画条件
	//扇形描写自動
	var splitAuto=true;
	var split=1;//分割 6 2 1
	var step_v=5;//ステップ 2-10
	var angle_max=360/split;//最大描画角度保存

	//自動
	var s_no;
	if(splitAuto) {
		s_no=Math.floor(Math.random()*sectersplit.length);
		split=sectersplit[s_no];
		step_v=stepArr[s_no];
		angle_max=360/split;
	}

	//90度補正逆転あり
	//var start_angle=0;//0
	var start_angle=Math.PI*1/2*chg_v;//+-90度
	var draw_angle=0;//Math.PI*rate/angle_max*2;
	var rate=360;//描画角度

	if (inType) {rate=0;}//0
	if (!inType) {rate=angle_max;}//360

	//クリア
	overImage=new createjs.Bitmap();
	overImage.image=new createjs.Bitmap(mainImage).image;
	//中央補正
	overImage.regX=canvasWidth/2;
	overImage.regY=canvasHeight/2;
	overImage.x=canvasWidth/2;
	overImage.y=canvasHeight/2;
	overImage.mask=secterMask;
	//addChild container
	container.addChild(secterMask);
	container.addChild(overImage);

	//OUTの場合下画像を入れる
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	//tickを設定
	secterMask.tick=function (){
		if (inType) {
			if(rate <= angle_max) {
				//扇形描写
				secterMask.graphics.clear();
				//360
				//draw_secter(secterMask,radius_gl,start_angle,rate);
				//自動
				draw_secter2(secterMask,radius_gl,start_angle,rate,split);
				rate +=step_v;
				if(rate >= angle_max) {finshsecter();}
			}
		}
		if (!inType) {
			if(rate >= 0) {
				secterMask.graphics.clear();
				//360
				//draw_secter(secterMask,radius_gl,start_angle,rate);
				//自動
				draw_secter2(secterMask,radius_gl,start_angle,rate,split);
				rate -=step_v;
				if(rate <= 0) {finshsecter();}
			}
		}

	}
	//addEventListenerを設定
	createjs.Ticker.addEventListener('tick',secterMask.tick);

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

//扇形描写Sector1
function draw_secter(s,radius,s_angle,rate) {
	var graphics=new createjs.Graphics();
	graphics.moveTo(0,0);
	graphics.arc(0,0,radius,s_angle,Math.PI*rate/360*2+s_angle);
	graphics.closePath();
	s.graphics=graphics;
}
//扇形描写Sector2
function draw_secter2(s,radius,s_angle,rate,split) {
var vv=(Math.PI*2/split);
	var graphics=new createjs.Graphics();
	for (var i=0; i < split; i++) {
		var s_v=vv*i;
		graphics.moveTo(0,0);
		graphics.arc(0,0,radius,s_v+s_angle,s_v+Math.PI*2*rate/360+s_angle);
		graphics.closePath();
	}
	s.graphics=graphics;
}
//扇形描写終了
function finshsecter() {

	//遅延
	setTimeout(function() {
		//Listener削除
		createjs.Ticker.removeEventListener('tick',secterMask.tick);
		finshAll();
	},200);
}

//doubleアニメ
function doubleslide_anime() {

	//左右上下
	//left right up down
	var pos_x=[canvasWidth,-canvasWidth,0,0];
	var pos_y=[0,0,canvasHeight,-canvasHeight];
	var pos_x2=[0,canvasWidth,0,0];
	var pos_y2=[0,0,0,canvasHeight];
	//移動位置
	var movpos_x=[-canvasWidth,canvasWidth,0,0];
	var movpos_y=[0,0,-canvasHeight,canvasHeight];
	//ランダム番号
	var pos_no=Math.floor(Math.random()*4);

	//double画像収納コンテナ
	topImage=new createjs.Container();
	//第1画像
	var dbl_image1=new createjs.Bitmap(assets[image_no]);
	dbl_image1.x=pos_x[pos_no];
	dbl_image1.y=pos_y[pos_no];
	topImage.addChild(dbl_image1);

	//welcome画像保存
	if (once) {keep_mainImage=welcome_result;}
	once=false;
	//第2画像
	var dbl_image2=new createjs.Bitmap(keep_mainImage);
	dbl_image2.x=0;
	dbl_image2.y=0;
	topImage.addChild(dbl_image2);
	keep_mainImage=assets[image_no];

	topImage.alpha=1;
	topImage.rotation=0;
	topImage.x=0;
	topImage.y=0;
	topImage.scaleX=1;
	topImage.scaleY=1;

	//addChild
	container.addChild(topImage);

	//クリア
	var params={};

	//OUTの場合下画像を入れる
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	//TWEENの実行
	var tw=createjs.Tween.get(topImage)
	.to({x:movpos_x[pos_no],y:movpos_y[pos_no]},double_speed)
	.call(finshAll);

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

//slice shapemask blockアニメ
function slice_anime() {

	globalflag=false;

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

	maskalpha=false;
	var move_graphics=false;
	var rate_v=1;//拡大率
	var customChip=false;

	//多目的用
	var maskflag=Math.floor(Math.random()*5);//3以上
	var color_mask=false;//カラーマスク
	if (maskflag < 2) {color_mask=true;}
	var blockflag=Math.floor(Math.random()*10);
	var cflag=Math.floor(Math.random()*3);
	//block2Type決定 0-3
	block2Type=Math.floor(Math.random()*4);

	//マスク番号
	var maskNo=0;

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

	//Block1枚修正20%
	if (moveType == 'block') {
		//通常
		if (blockflag == 1) {split_h=1;split_v=1;}
		//グラデSLIDE
		if (blockflag == 0) {split_h=1;split_v=1;moveType='block2';}
	}

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

	//マスクスタイル
	var maskStyle=Math.floor(Math.random()*2);

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

	//画像分割貼り付け/SliseBitmapクラス
	var srcArr=[];//URL容器
	delay_block=[];

	var flag3=1;
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//Bitmap継承SliseBitmapクラス/Bitmap配列に保存
			if (moveType == 'slice') {
				//SliseBitmap(画像,分割位置X,Y,大きさ横,縦)
				chip[k]=new SliseBitmap(mainImage,chip_pos_X[k],chip_pos_Y[k],chip_W[k],chip_H[k]);
				color_mask=false;
			}
			if (moveType == 'shapemask') {
				chip[k]=new createjs.Shape();
				if(splitNo == 0) {
					//楕円
					if (maskStyle == 0) {
						chip[k].graphics.beginFill().drawEllipse(0,0,chip_W[k],chip_H[k]);//だ円のほうが良い
						rate_v=1.5;//拡大率
						customChip=true;
						move_graphics=false;
						color_mask=false;
						maskNo=0;
					}
					//角丸
					if (maskStyle > 0) {
						chip[k].graphics.beginFill();
						operaRoundRect(chip[k],0,0,chip_W[k],chip_H[k],10);//角丸
						rate_v=1.1;//拡大率
						customChip=true;
						move_graphics=false;
						color_mask=false;
						maskNo=1;
					}
				}
				//通常
				if(splitNo > 0) {
					//カラーマスク
					if (color_mask) {
						var color="#FFFFFF";
						//1
						if (split_all < 2) {color=createjs.Graphics.getHSL(Math.floor(Math.random()*24)/24*360,100,50);}//直接
						//2-
						if (split_all > 1) {
							if (maskflag == 0) {color=createjs.Graphics.getHSL(k/split_all*360,100,50);}//直接
							if (maskflag == 1 && flag3 > 0) {color="#000000";}
						}
						chip[k].graphics.beginFill(color).drawRect(0,0,chip_W[k],chip_H[k]);
					}
					if (!color_mask) {
						chip[k].graphics.beginFill().drawRect(0,0,chip_W[k],chip_H[k]);
						color_mask=false;
					}
					move_graphics=false;

				}
			}
			if (moveType == 'block') {
				chip[k]=new createjs.Shape();
				//指定色
				var color=blockcolor;
				if (cflag == 1) {
					if (flag3 > 0) {color="#4A4A4A";}
				}
				if (cflag == 2) {
					if (split_all > 1) {color=createjs.Graphics.getHSL(k/split_all*360,50,45);}
				}
				chip[k].graphics.beginFill(color).drawRect(0,0,chip_W[k],chip_H[k]);
				color_mask=false;
				inType=true;
			}
			if (moveType == 'block2') {

				//透明度グラフイック 横true
				if (block2Type < 2) {
					chip[k]=createGradientShape(canvasWidth,canvasHeight,"#000000",block2Type);
				}
				if (block2Type > 1) {
					chip[k]=gradientShape=createGradientShape (canvasWidth,canvasHeight,"#000000",block2Type);
				}
				color_mask=false;
				inType=true;
			}

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

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

	//標準パターン番号削除未使用
	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 chgflag5=Math.floor(Math.random()*2)+1;
	//多目的用4-5
	var chgflag3=Math.floor(Math.random()*3);
	var chgflag4=Math.floor(Math.random()*3);
	//逆転フラグ
	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()*14);
	//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()*13);
	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;
	//マイナススケール
	var scaleXminus=false;

	//ひねりskew確率20%
	var skew_no=Math.floor(Math.random()*5);
	var skewx_v=0;
	var skewy_v=0;
	var skewflag=false;//判定
	//splitNo 0-3に処理
	if (skew_no == 1 && splitNo < 4) {
		skewflag=true;
		rotate=0;//回転0
		var skewx_v=90*(chgflag2-1)*chg_v;
		var skewy_v=90*chg_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;}
	}

	//対角線上補正
	if (disposition_no ==10) {
		//合わないので補正
		if (split_all == 1) {disposition_no=0;}
		if (split_v == 1) {disposition_no=0;}
	}

	//Bitmap配置、配置条件設定
	var vx=0,vy=0,angle_v=0;

	//移動係数
	var move3_v=(chgflag3-1);
	var move4_v=(chgflag4-1);

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

			//大きさ
			chip[k].width=chip_W[k];
			chip[k].height=chip_H[k];
			chip[k].id=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;

			//移動加算値等の計算
			switch(disposition_no){
				case 0://その場所で
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//補正
					if (scale_no == 1) {alpha_no=0;}
					spd_v=0.8;
					//スケール例外その場拡大20%
					if (chgxyflag == 2) {scale_no=4;}
					//マイナススケール
					if (chgxyflag == 1 && split_v == 1) {
						scale_no=1;rotate=0;alpha_no=0;scaleXminus=true;
					}
				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);
					if (split_v == 1 && split_all > 1) {scale_no=0;}//食み出し防止
					spd_v=1.5;
				break;
				case 2://左右に中心から補正
					v_x=(canvasWidth/2+chip_W[k]/2*rate_v)*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*rate_v;
					//回転は見出し補正
					if(rotate > 0) {alpha_no=0;}

					//左右DOORスライド
					if (chgflag == 1 && split_h == 2) {
						if (i==0) {disposition_X=(canvasWidth/2+chip_W[k]/2)*-1;}
						if (i==1) {disposition_X=(canvasWidth+chip_W[k]/2);}
						delay_no=8-(chgflag3);//8 7 6
						rotate=0;
					}
					spd_v=1.2;
				break;
				case 3://上下に中心から補正
					disposition_X=set_pos_X[k];
					v_y=(canvasHeight/2+chip_H[k]/2*rate_v)*chg_v;
					if (!chgflag && j % 2 != 0) {v_y *=-1;}
					if (chgxyflag < 2) {v_y *=flag3;}
					disposition_Y=v_y+canvasHeight/2*rate_v;
					//回転は見出し補正
					if(rotate > 0) {alpha_no=0;}

					//上下DOORスライド
					if (chgflag == 1 && split_v == 2) {
						if (j==0) {disposition_Y=(canvasHeight/2+chip_H[k]/2)*-1;}
						if (j==1) {disposition_Y=(canvasHeight+chip_H[k]/2);}
						delay_no=8-(chgflag3);//8 7 6
						rotate=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://少し移動/移動無しあり
					disposition_X=set_pos_X[k]+chip_W[k]/2*move3_v;
					disposition_Y=set_pos_Y[k]+chip_H[k]/2*move4_v;
					//補正
					if (split_all == 1) {rotate=0;}
					alpha_no=0;
					spd_v=0.8;
				break;
				case 8://要素の大きさ分移動
					disposition_X=set_pos_X[k]+chip_W[k]*move3_v;
					disposition_Y=set_pos_Y[k]+chip_H[k]*move4_v;
					//補正
					if (split_all != 1 && scale_no == 1) {alpha_no=0;}//1枚以外強制
					if (move3_v == 0 && move4_v == 0) {alpha_no=0;}//移動無し
					if (split_all == 1) {rotate=0;spd_v=1.2;}
				break;
				case 9://4隅対角
					//X
					if (i <= shc) {disposition_X=-chip_W[k]/2;}
					if (i > shc) {disposition_X=canvasWidth+chip_W[k]/2;}
					//Y
					if (j <= svc) {disposition_Y=-chip_H[k]/2;}
					if (j > svc) {
						disposition_Y=canvasHeight+chip_H[k]/2;
						if (split_h == 1) {disposition_X=canvasWidth+chip_W[k]/2;}
					}
					//補正
					if (split_v == 1 && i > shc) {
						disposition_Y=canvasHeight+chip_H[k]/2;
					}
				break;
				case 10://簡易計算 対角線上
					if (chg_v > 0) {disposition_X=j*canvasWidth/(split_v-1);}
					if (chg_v < 0) {disposition_X=Math.abs(split_v-j-1)*canvasWidth/(split_v-1);}
					disposition_Y=set_pos_Y[k];//その位置
					if (scale_no == 1) {alpha_no=0;}
				break;
				case 11://少しずらす/ずれない時もある
					disposition_X=set_pos_X[k]+chip_W[k]/2*(chgflag2-1);
					disposition_Y=set_pos_Y[k]+chip_H[k]/2*(chgflag5-1);
					alpha_no=0;
					spd_v=0.8;
				break;
				default://そのほか
					disposition_X=set_pos_X[k];
					disposition_Y=set_pos_Y[k];
					//スケール補正
					scale_no=0;
					alpha_no=0;
					spd_v=0.8;
			}

			//スケール方向決定
			switch(scale_no){
				case 0:
					scale_X=0;scale_Y=0;
				break;
				case 1:
					scale_X=1;scale_Y=1;
					//マイナススケール補正 slice shapemask block
					if (scaleXminus) {scale_X=chgflag2*-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倍、負荷が大きい
					//maskは適用外
					if (moveType == 'shapemask') {scale_no=1;scale_X=1;scale_Y=1;alpha_no=0;}
				break;
				default:
					scale_X=0;scale_Y=0;
			}

			//block2
			if (moveType == 'block2') {

				if (block2Type < 2) {
					disposition_X=canvasWidth*3;
					if (block2Type == 1) {disposition_X *=-1;}
					disposition_Y=canvasHeight/2;
					scale_X=3;scale_Y=1;
				}
				if (block2Type > 1) {
					disposition_X=canvasWidth/2;
					disposition_Y=canvasHeight*3;
					if (block2Type == 3) {disposition_Y *=-1;}
					scale_X=1;scale_Y=3;
				}
				alpha_no=1;
				rotate_v=0;
				skewflag=false;
				color_mask=false;
			}

			//カラー強制補正
			if (color_mask) {alpha_no=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;}
			//Mask-alpha
			var base_alpha=1;
			if (color_mask) {
				base_alpha=0;//0
				if (inType && scale_no != 1) {
					base_alpha=1;
				}
			}

			//初期の移動
			//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;
				//skew
				if (skewflag) {
					chip[k].skewX=skewx_v;
					chip[k].skewY=skewy_v;
				}
				//カラー
				if (color_mask) {chip[k].alpha=base_alpha;}//0
			}

			//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=outscale_X;//カスタム補正
				chip[k].scaleY=outscale_Y;
				chip[k].alpha=1;
				//skew
				if (skewflag) {
					chip[k].skewX=0;
					chip[k].skewY=0;
				}
			}

			//表示リスト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;}

	//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 == 11) {delay_st[k]=k*1.25*delay_speed;}
			//追加、対角中より外に/対角方向違い
			if (delay_no > 11) {delay_st[k]=Math.abs(j*split_h/split_v-Math.abs(i-sh)*chg_v)*1.5*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;}
	}

	//11速度調整/一番時間がかかる
	if (delay_no == 11 && split_all > 20) {spd_v=0.7;}

	//画像配置
	if (moveType == 'shapemask') {
		var k=0;
		for (var i=0; i < split_h; i++) {
			for (var j=0; j < split_v; j++) {

				img_st[k]=new createjs.Bitmap(mainImage);
				img_st[k].mask=chip[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;}

	var tween_speed=0;
	//速度
	if (moveType == 'shapemask') {tween_speed=shapemask_speed*spd_v;}
	if (moveType == 'slice') {tween_speed=slice_speed*spd_v;}
	if (moveType == 'block') {
		tween_speed=slice_speed*spd_v;
		delay_block=delay_st;
	}

//テキストを表示
//set_text("MODE: "+moveType+" /分割[ "+split_h+"x"+split_v+": "+split_all+" ] / IN: "+inType+" / splitNo."+splitNo+" / dispositionNo."+disposition_no+" / delayNo."+delay_no+" / colorMask: "+color_mask);

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

	//Easeの変更削除

	//TWEENの実行
	if (moveType == 'slice') {
		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,skewX:0,skewY:0};
				} 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,skewY:skewy_v};
				}

				var tween=createjs.Tween.get(chip[k])
				.wait(delay_st[k])
				.call(indexchg)
				.to(params,tween_speed)
				.call(finshslice_tween);

				k++;

			}
		}
	}

	//TWEENの実行2
	//outのマスクalpha
	var out_alpha=1;

	if (moveType == 'shapemask') {
		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:outscale_X,scaleY:outscale_Y,rotation:0,alpha:1,skewX:0,skewY:0};
				}
				if (!inType) {
					//カラーマスク補正
					if (color_mask && scale_no == 1) {out_alpha=0;}
					params={x:mov_pos_X[k],y:mov_pos_Y[k],scaleX:scale_X,scaleY:scale_Y,rotation:rotate_v[k],alpha:out_alpha,skewY:skewy_v};
				}

				var tween=createjs.Tween.get(chip[k])
				.wait(delay_st[k])
				.call(alphachg)
				.to(params,tween_speed)
				.call(finshmask_tween);

				k++;

			}
		}
	}


	//TWEENの実行3
	if (moveType == 'block') {

		var k=0;
		var params={};
		for (var i=0; i < split_h; i++) {
			for (var j=0; j < split_v; j++) {

				params={x:set_pos_X[k],y:set_pos_Y[k],scaleX:1,scaleY:1,rotation:0,alpha:1,skewX:0,skewY:0};
				var tween=createjs.Tween.get(chip[k])
				.wait(delay_st[k])
				.to(params,tween_speed)
				.call(finshblock_tween);

				k++;

			}
		}
	}
	if (moveType == 'block2') {
		var k=0;
		params={x:set_pos_X[k],y:set_pos_Y[k]};
		var tween=createjs.Tween.get(chip[k])
		.wait(1000)
		.to(params,2000)
		.call(finshblock_tween2);
	}

	//OUTの場合下画像を入れる
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	//Firefox
	setTimeout(function() {
		//Ticker設定
		createjs.Ticker.setFPS(20);
		createjs.Ticker.addEventListener('tick',tick);
	},20);

}

//alpha
function alphachg (event) {

	if (!maskalpha) {return}
	img_st[this.id].on('tick',function() {
		if (inType) {
			if (this.alpha < 1) {
				this.alpha +=0.075;
			}
		}
		if (!inType) {
			if (this.alpha > 0) {
				this.alpha -=0.075;
			}
		}
	});
}

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

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

//重ね順を一番上にする
function indexchg () {
	container.setChildIndex(this,split_all-1);
	//container.setChildIndex(this,0);
}
//個別のアニメ完了
function finshtween () {

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

}
//スライス個別のアニメ完了
function finshslice_tween () {

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

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

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

//BLOCK個別のアニメ完了
function finshblock_tween () {

	//全て完了
	if(kcount == split_all-1) {
		//画像alpha処理調整
		setTimeout(function(){
			mainImage=assets[image_no];
			backImage.image=new createjs.Bitmap(mainImage).image;
			blockcount=0;
			//TWEENの実行4 FadeIn
			if (moveType == 'block') {
				var k=0;
				var params={};
				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {
						params={alpha:0};
						var tween=createjs.Tween.get(chip[k])
						.wait(delay_block[k])
						.to(params,800)
						.call(function() {
							if(blockcount == split_all-1) {
								finshAll();
							}
							//カウント加算
							blockcount ++;
						});
						k++;
					}
				}
			}
		},500);
	}
	//0からカウント加算
	kcount ++;
}
//BLOCK個別のアニメ完了2
function finshblock_tween2 () {

	var k=0;
	var pos_X,pos_Y;

	//スライド位置決定
	if (block2Type < 2) {
		pos_X=canvasWidth*3*-1;
		if (block2Type == 1) {pos_X *=-1;}
	}
	if (block2Type > 1) {
		pos_Y=canvasHeight*3*-1;
		if (block2Type == 3) {pos_Y *=-1;}
	}
	//全て完了
	setTimeout(function(){

		mainImage=assets[image_no];
		backImage.image=new createjs.Bitmap(mainImage).image;
		//TWEENの実行
		if (moveType == 'block2') {
			var params={x:pos_X,y:pos_Y};
			var tween=createjs.Tween.get(chip[k])
			.to(params,2000)
			.call(function() {
				finshAll();
			});
		}
	},500);

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

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

	//removeAllTweens必要なら
	createjs.Tween.removeAllTweens();
	//上画像コンテナの中を削除
	container.removeAllChildren();

	//welcome表示中なら削除、遅延して削除している
	if(welcomeImage.visible) {
		stage.removeChild(welcomeImage);
	}
	//double重要
	if (once) {once=false;}
	//クリア
	kcount=0;

	//遅延させる
	setTimeout(function() {

		//Ticker削除
		createjs.Ticker.removeEventListener('tick',tick);
		//TEXT-CLEAR
		if (btnUse) {set_text("CLICK");}
		//アクション待ち
		stopClick=false;

		//AUTO
		if(autoUse) {
			set_text("AUTO")
			set_timer();
		}

	},600);//300-600

}

//loading-Ticker
function loadingtick () {
	loadingShape.rotation +=5;
	stage.update();
}
//tick
function tick() {
	stage.update();
}

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

	stopClick=true;
	set_text("AUTO");
	//次ぎの番号
	image_no +=1;
	if (image_no >= image_max) {image_no=0;}
	//画像保存値が有るか
	if (assets[image_no]) {
		//保存値利用
		mainImage=assets[image_no];
		stopClick=true;
		draw_image();
	} else {
		//任意画像ロード
		imageload();
	}

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

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

//VIEWTEXT
function set_text(t) {
	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

//DRAW-roundRectBtn
function roundRectBtns(len) {

	var btnLabel="PHOTO";//ラベル PHOTO

	var btn_width=60;//幅60
	var btn_height=20;//高さ20
	var c_radius=5;//コーナー半径5
	var btn_spc=10;//ボタン間隔スペース10
	var center=true;//全体の中央補正

	//var labels=[];//ラベル使用しない
	
	var num=len;//数

	//firefox文字位置補正
	var y_v=0;
	if(firefox) {y_v=2;}//1-2

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

		var label=btnLabel+(i+1);//ラベル
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//RolloverButtonクラス
		myhitBtn[i]=new RolloverButton(-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",label,"12px","#FFFFFF","#FFA500","#E6E6FA");

		myhitBtn[i].cursor="pointer";
		myhitBtn[i].x=(btn_width+btn_spc)*i;
		myhitBtn[i].y=0;
		myhitBtn[i].name="btntext";

		//文字位置補正
		myhitBtn[i].getChildAt(1).y=y_v;
		//陰影
		myhitBtn[i].shadow=shadow;

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

	}

	var btnbox_w=myhitBtn[num-1].x-myhitBtn[0].x;
	//中央配置補正
	if (center) {btncontainer.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

//alphaGradient横縦
function createGradientShape (w,h,color,style) {
	var alphaback=createjs.Graphics.getRGB(0,0,0,0);
	var s=new createjs.Shape();
	if(style < 2) {
		s.graphics.beginLinearGradientFill([alphaback,color,color,alphaback],[0,.33,.66,1],0,0,w,0).drawRect(0,0,w,h);
	}
	if(style > 1) {
		s.graphics.beginLinearGradientFill([alphaback,color,color,alphaback],[0,.33,.66,1],0,0,0,h).drawRect(0,0,w,h);
	}
	return s;
}

//代替Canvas
//幅、高さ、色、フォント作る、文字種、サイズ、文字色、ストリング
function createGradientCanvas2 (w,h,c,c2,data,make,font,fsize,fcolor,text) {

	//data
	var x0=data.x0;
	var y0=data.y0;
	var x1=data.x1;
	var y1=data.y1;
	//
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	var gradient=ctx.createLinearGradient(x0,y0,x1,y1);
	gradient.addColorStop(0,c);
	gradient.addColorStop(1,c2);
	ctx.fillStyle=gradient;
	ctx.rect(0,0,w,h);
	ctx.fill();

	if (make) {

		var font_v=fsize +" "+ font;

		ctx.fillStyle=fcolor;
		ctx.font=font_v;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.fillText(text,w/2,h/2);

	}

	return canvas;
}

//色付き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;
}
//中心0 Rect未使用
function createRect(s,x,y,w,h) {
	s.graphics.moveTo(w,-h)
	.lineTo(w,h)
	.lineTo(-w,h)
	.lineTo(-w,-h)
	.lineTo(w,-h);
}
//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);
}

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

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

//Bitmap継承SliseBitmapクラス
(function (window){

	function SliseBitmap(img,pos_x,pos_y,c_w,c_h){
		//
		this.img=img;
		this.pos_x=pos_x;
		this.pos_y=pos_y;
		this.c_w=c_w;
		this.c_h=c_h;
		//スライス
		var slice=document.createElement("canvas");
		slice.width=this.c_w;
		slice.height=this.c_h;
		var context=slice.getContext("2d");
		context.drawImage(this.img,this.pos_x,this.pos_y,this.c_w,this.c_h,0,0,this.c_w,this.c_h);
		this.initialize(slice);//Canvas要素
	}
 	//Bitmap化
	SliseBitmap.prototype=new createjs.Bitmap();
	//親クラスのinitializeを取得
	SliseBitmap.prototype.Bitmap_initialize=SliseBitmap.prototype.initialize;
	//親クラスの_tickを取得/必要か不明
	SliseBitmap.prototype.Bitmap_tick=SliseBitmap.prototype._tick;

	SliseBitmap.prototype.initialize=function(slice){
		this.Bitmap_initialize(slice);
	}
 
	window.SliseBitmap=SliseBitmap;

}(window));

//------------------------------------------------------------------------
//RolloverButtonクラス
(function(window){

	//Container継承クラス
	function RolloverButton (x,y,w,h,r,c,label,size,lc,overc,outc) {

		this.initialize(x,y,w,h,r,c,label,size,lc,overc,outc);

	}

	//Containerクラス
	RolloverButton.prototype=new createjs.Container();
	//親クラスのinitializeを取得
	RolloverButton.prototype.Container_init=RolloverButton.prototype.initialize;
	//
	RolloverButton.prototype.initialize=function(x,y,w,h,r,c,label,size,lc,overc,outc){

		this.Container_init(x,y,w,h,r,c,label,size,lc,overc,outc);

		this.x=x;
		this.y=y;
		this.w=w;
		this.h=h;
		this.r=r;
		this.c=c;
		this.label=label;
		this.size=size;
		this.lc=lc;
		this.overc=overc;
		this.outc=outc;

		var font_v=this.size+" "+"Arial";
		//
		var back=new createjs.Shape();
		back.graphics.s().beginFill(this.outc);//本来は色cを使用
		operaRoundRect(back,this.x,this.y,this.w,this.h,this.r);
		var text=new createjs.Text(this.label,font_v,this.lc);
		text.maxWidth=w;
		text.textAlign="center";
		text.textBaseline="middle";
		text.name="btntext";//判定用
		this.addChild(back,text);

		//rollover
		this.addEventListener("rollover",function () {
			back.graphics.clear();
			back.graphics.s().beginFill(overc);
			operaRoundRect(back,x,y,w,h,r);
			stage2.update();
		});
		//rollout
		this.addEventListener("rollout",function () {
			back.graphics.clear();
			back.graphics.s().beginFill(outc);
			operaRoundRect(back,x,y,w,h,r);
			stage2.update();
		});
	}

	window.RolloverButton=RolloverButton;

}(window));

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

//START
window.onload=function() {
	var img=new Image();
	img.src='/main/images/welcome_back6.jpg';
	img.onload=function () {
		welcome_result=img;
		welcomeflag=true;
		init();
	};
	img.onerror=function () {
		welcome_result=img;
		welcomeflag=false;
		init();
	};
};

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


CSS

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


/*日本語 createJS049.css*/

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

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

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

#btn-box {
width:640px;
height:50px;
margin:10px auto;
padding:0;
}

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

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


簡単な説明


複数の形状の違う「画像分割」と「マスク要素」等を組み合わせて画像エフェクトする


単なるテストですので、説明は省略します。説明しようとすれば何ページにもなるので止めた。
むしろ、この様に面倒なものを作る人はイナイと思います、、


Auto

画像送りを自動にするか、ボタンを使用して1枚ずつ表示するかの設定です。ボタンを使用の場合は「ボタン使用」も有効にしてください。画像はその都度、ロードして表示実行します。(一括ロードでは有りません)


ボタン使用

ボタンを使用の場合は、ボタンをを押さなければ画像の切り替えはしません。

1.画像はボタンを押してからロードして表示されます。読み込み済みの画像は「保存」しますので再度読み込みはしないようにしています。
2.画像の読み込みに失敗した画像は表示しません。IMAGE NONE の代替画像を表示します。
(その都度画像ロードのため、代替画像を表示したほうが処理を効率化出来ます)
3.画像「エフェクト」中はボタンは機能しません。
4.マシン性能が悪い場合はボタンの反応が少々鈍いようです。(easeljs-0.7以降)


自動分割

このJSは原則「自動分割」で使用します。分割データ登録は可能です。


分割データ登録

「デモ」の自動分割のデータは以下の様になります。第一番目のデータは、予約されていますので、なるべく正方形に近くなる分割数を記載のこと。(楕円、角丸マスクの設定が行われます)
第二番目以降は自由です、同じ分割が多くあれば出現確率が増します。
1x1つまり、分割しない1枚画像の場合も登録は可能ですが、別途に専用「エフェクト」で実行されるようになっていますので登録はしません。


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

--------------------------------------------------------------------
11x5 5x3 の確率が増す、第一番目の確率は減る
1x1も登録は可能ですが原則設定しません

var splitHs=[11,11,11,11,10,7,5,5,11,11,2,2,1,1];
var splitVs=[5,5,5,5,,6,3,3,3,2,1,2,4,9,1];

分割は一般的に、奇数値でキレイになるように設計されています。
但し、4Doorタイプが中にありますのでこれは偶数値の場合にキレイになるようになっています。(2x2)
1枚画像(1x1)もなるべくキレイになるように一応は修正していますが、必ず全てに旨く合致するとは限りません。


画像分割、マスクなどの「エフェクト」出現確率

画像分割、マスクなどの出現確率の初期値は次の様に成ります。書き換えれば確率が変わります。登録無しのものは実行されません。


//タイプ登録
var move_name=["scale","scale","scale","scale","mask","mask","mask","angle","sectermask","block","double","slice","slice","shapemask","shapemask"];
//var move_name=["scale","mask","angle","sectermask","block","double","slice","shapemask"];
//var move_name=["block","slice","shapemask"];

「エフェクト」の種類

エフェクト (moveType) は以下が設定されています。呼称は当方独自の名前です。

1. scale : 1枚画像の伸縮及びスライド、フエードなど。
2. double : 2枚画像並びのスライド。
3. mask : 1枚画像のマスク処理したもの。(スライドと見分け難い)
4. angle : 1枚画像の斜めにマスク処理したものを左右に伸縮。
5. slice : 画像の複数分割エフェクト。(通常複数分割)
6. shapemask : 画像の複数マスク分割エフェクト。(丸、角丸マスク、虹色着色)
7. block : 複数分割のブロックを集合させてその後フエードアウトで画像表示。(黒、虹色)
8. sectermask : イワユル、レーダーエフェクトです。(弧状数種)

今後、CreateJSの進化に伴いエフェクトは増える可能性が有ります。


4Doorエフェクト

4Doorエフェクトの場合、下記の様にしても移動可能ですが、2x2分割に限ります。但し開閉のタイミングなどは、delay_no により違ってきます。
「デモ」では4Doorに出来る分割を判定して4隅に移動するようにしています。


//4DOOR
if(split_h == 2 && split_v == 2) {
	disposition_X=door4x[k]*canvasWidth;
	disposition_Y=door4y[k]*canvasHeight;
}

多少面倒ですが、開閉する順番なども旨く変更できれば尚キレイになります。(ループの順序ではなく、対角順に動かすとキレイ、デモでは未処理です)


レーダーエフェクト

どこかでこのような呼称がありました。弧状(扇形)にグラフイックを描いているだけです。Loadingにも利用できるでしょう?


他のデモJSとの相違など

他のデモJSを参考に書き換えなどの際、同じような形式でも一部変数が違ったりもしますので注意下さい。
2Doorの設定では、delay_no を指定している部分がありますので、delay_no の追加の際は注意が必要です。
また、条件の合わない設定は途中修正などしていますので、書き換えの際には十分処理を理解の上にしなければなりません。


Welcome画像の代替画像

最初に表示するWelcome画像の読み込みに失敗した場合は、代替画像を作り利用しているようにしています。


ボタン設計配置の詳細

ボタン使


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]