POPSブログ

jQueryで画像分割を変化して表示する

193

  Category:  jquery2013/01/13 pops 

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行ってみます。その都度、画像分割を変化させた形態にした。

 

jQueryで画像分割を変化して表示する

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行う作業の基本は、前ページで述べた。今回は表示をアレンジする方法について簡単に考えて見る。


画像分割を変化して表示する サンプル


注意、多少重くなりますので、マシン性能が良くない場合は、Chrome でご覧ください。


Example

エフェクト中はボタンを押しても無効です。画像をロード出来ない場合「Loading画像」を「クリック」すれば解除されます。


  • PHOTO1
  • PHOTO2
  • PHOTO3
  • PHOTO4


 

サンプルのHTML JS CSS


HTML


<ul id="tab-menu">
	<li text="/main/images/toyota_car10.jpg">PHOTO1</li>
	<li text="/main/images/toyota_car11.jpg">PHOTO2</li>
	<li text="/main/images/toyota_car12.jpg">PHOTO3</li>
	<li text="/main/images/toyota_car13.jpg">PHOTO4</li>
</ul>
<div id="image-box-base">
	<div id="image-box"><img /></div>
	<div id="top-box"></div>
	<div id="loading"></div>
</div>

text属性は当方が勝手に作った属性です。jquery attr() で読み込みできます。

画像URLは上記サンプルの例です。使用者の画像収納先に合わせてください。


JS

追記修正、Operaで少し問題が有ったので、一部修正しました。通常のパフォーマンスを持つマシン環境なら問題ありません。マシン環境の悪い場合は Chrome でご覧ください。2013/01/14

slice01.js


//slice01.js
//日本語

(function($){

	$(function () {

		//設定
		var select_no=0;//最初に開くメニューの位置
		var speed=600;//フェード速度 400-800
		var delay_speed = 100;//delay基準時間 50-200

		box_W=640;//画像BOX幅
		box_H=300;//画像BOX高さ

		//in outの設定は専用、autoならin_type_nmのデータで確率計算
		var in_out="auto";// in out auto
		//分割のの種類
		var split_type="free";// free set
		//free分割の設定、横、縦の分割数を登録
		var splitHs=[9,9,9,6,4,2,6,10,1,1];
		var splitVs=[5,5,5,3,2,2,1,1,5,9];
		//set分割の設定、分割は固定される
		var split_h = 9;//横分割数
		var split_v = 5;//縦分割数
		var split_total = split_h*split_v;//分割合計
		var split_max=50;//最大分割合計

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

		var no=0;
		var keep_no=select_no;
		var img_url="";
		var load_url="";
		var keep_url;

		fade_flag=false;
		//chip sliceオブジェクト
		var chipboxs = [];
		//chipの位置、大きさ保存容器
		var chip_pos_X = [],chip_pos_Y = [],chip_W = [],chip_H = [];
		//スライス変数
		var slice_W = 0,slice_H = 0,slice_Wb = 0,slice_Hb = 0;

		//IN OUT、確率変更可能
		var in_type_nm = ['in','out','in','out','in','out'];
		var slice_move_type="in";

		//移動ポイント配列
		var pointx=[0,box_W/2,box_W,box_W,box_W,box_W/2,0,0,box_W/2,box_W/2,box_W/2,box_W/2];
		var pointy=[0,0,0,box_H/2,box_H,box_H,box_H,box_H/2,box_H/2,box_H/2,box_H/2,box_H/2];

		var move=false;
		//移動位置配列
		var mv_posX = [];
		var mv_posY = [];
		//移動大きさ配列
		var mv_chipW = [];
		var mv_chipH = [];

		var sliceflag = 0;
		var anime_move = false;
		var box_len;
		var delayflag = 0;

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

		//外枠jqueryオブジェクト
		var tabmenu=$("#tab-menu");
		var boxbase=$("#image-box-base");
		var imagebox=$("#image-box");
		var topbox=$("#top-box");
		var loading=$("#loading");

		//欄外移動
		topbox.css({'left':box_W});
		//loadingを一旦けす
		loading.css({'display':'none'});

		//指定場所のOPEN
		tabmenu.find("li").eq(select_no).addClass("active");
		img_url=tabmenu.find("li").eq(select_no).attr('text');
		//指定画像を表示
		imagebox.children("img").attr({'src':img_url});
		//
		load_url=keep_url=img_url;

		//スライス要素作成
		init();

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

		//init スライス要素作成
		function init() {

			//スライス要素最大値
			var roop_v=split_max;
			if (split_type == 'set') {
				roop_v=split_total;
			}
			//スライス要素を作る
			//make chip
			var sliceboxs="";
			for (var i=0; i < roop_v; i++) {
				sliceboxs += '<div id="'+ 'slice'+ i + '" class="slice_bk"></div>';
			}
			//append #top-box
 			$('#top-box').append(sliceboxs);
			//len 実際に作った個数
			box_len = $('.slice_bk').length;
			//slice chips
			for (var i=0; i < roop_v; i++) {
				chipboxs[i] = $("#slice"+i);
			}

			//slice-set
			if (split_type == 'set') {
				slice_set();
			}

		}

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

			//スライス
			slice_W = Math.round(box_W/split_h);//YOKO
			slice_H = Math.round(box_H/split_v);//TATE
			slice_Wb = box_W - slice_W * (split_h - 1);
			slice_Hb = box_H - slice_H * (split_v - 1);

			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					//大きさ保存
					chip_W[k] = slice_W;
					if (i == split_h - 1) {chip_W[k] = slice_Wb;}
					chip_H[k] = slice_H;
					if (j == split_v - 1) {chip_H[k] = slice_Hb;}
					//位置保存
					chip_pos_X[k] = slice_W * i;
					chip_pos_Y[k] = slice_H * j;

					k ++;
				}
			}
		}

		//メニューclick-action
		tabmenu.find("li").click(function() {

			//作動中は反応しない
			if(anime_move) {return false}
			no=tabmenu.find("li").index(this);
			if(no == keep_no) {return false}
			//メニューactive
			tabmenu.find("li").removeClass("active");
			$(this).addClass("active");

			//画像URL取得、画像の読み込み
			load_url=$(this).attr('text');
			imgload ();
			return false;

		});

		//loading-click-action
		loading.click(function() {
			//
			loading.css({'display':'none'});
			//menuを前に戻す
			tabmenu.find("li").removeClass("active");
			tabmenu.find("li").eq(keep_no).addClass("active");
			//フラグもどす
			anime_move = false;
			return false;
		});

		//画像Preloader
		function imgload () {

			loading.css({'display':'block'});
			//imgPreloaderを作成
			var imgPreloader=new Image();
			//イベントハンドラ
			imgPreloader.onload=function() {

				loading.css({'display':'none'});
				//画像表示に進む
				show_image();

			}
			//重要、最後に書く
			imgPreloader.src=load_url;
		}

		//画像表示処理
		function show_image() {

			anime_move = true;

			//BOX欄外移動
			topbox.css({'left':box_W,'display':'block'});

			//auto分割
			if (split_type =='free') {

				//slice要素縮小
				$(".slice_bk").css({'top':0,'left':0,'width':0,'height':0});

				splitNo=Math.floor(Math.random() * splitHs.length);
				split_h=splitHs[splitNo];
				split_v=splitVs[splitNo];
				split_total = split_h*split_v;//分割合計

				slice_set();

			}
			//IN OUT、現在IN固定
			slice_move_type=in_out;
			if (in_out == 'auto') {
				slice_move_type = in_type_nm[Math.floor(Math.random() * in_type_nm.length)];
			}

			//Even算出、分割が変わるので再計算
			even_v = 1;
			if (split_v % 2 != 0) {even_v = 0;}

			//delayクリア
			var delay_st=[];

			//opacity用
			var optflag = Math.floor(Math.random() * 3);
			//多目的判定用
			var chgxyflag = Math.floor(Math.random() * 5);
			//多目的判定用2 追加
			var chgflag = Math.floor(Math.random() * 2);
			//delayed遅延させる/20%
			var delayed = Math.floor(Math.random() * 5);
			//標準delay_no 0-8
			var delay_no = Math.floor(Math.random() * 8);

			//ランダムポイント移動確率10%
			move=false;
			var pointflag=Math.floor(Math.random() * 20);
			var mvpoint=Math.floor(Math.random() * 12);
			//ランダムポイント移動有効、move=trueにする
			if (pointflag < 2) {move=true;}

			//optflag=0の場合透明度を設定する
			var opt=false;
			if (optflag < 1) {opt=true;}

			var slice_url=load_url;
			if (slice_move_type == 'out') {slice_url=keep_url;}

			//背景画像挿入
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					chipboxs[k].css({'left':chip_pos_X[k]});
					chipboxs[k].css({'top':chip_pos_Y[k]});
					//BACKGROUND-SET url
					chipboxs[k].css({'width':chip_W[k],'height':chip_H[k],'background-image':'url('+ slice_url + ')'});
					//BACKGROUND-SET position
					chipboxs[k].css({'backgroundPosition':(chip_pos_X[k] * -1) + 'px ' + (chip_pos_Y[k] * -1) + 'px'});

					k ++;
				}
			}

			if (slice_move_type == 'out') {imagebox.children("img").attr({'src':load_url}).css({'display':'block'});}

			//初期の大きさ-SET
			var pos_sx = 0;
			var pos_sy = 0;
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//XY
					//全てその場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
					pos_sx=chip_pos_X[k]+Math.floor(chip_W[k] / 2);
					pos_sy=chip_pos_Y[k]+Math.floor(chip_H[k] / 2);

					//opacityの要素の大きさ補正
					chipboxs[k].css({'opacity':1});
					var chipW=0,chipH=0;
					//opacity中心補正無し
					if(opt) {
						pos_sx=chip_pos_X[k];
						pos_sy=chip_pos_Y[k];
						chipW=chip_W[k];
						chipH=chip_H[k];
					}
					//ポイント移動1、全部random位置
					if (move && pointflag == 0) {
						var p=Math.floor(Math.random() * 9);
						pos_sx=pointx[p];
						pos_sy=pointy[p];
					}
					//ポイント移動2、位置1点指定
					if (move && pointflag == 1) {
						pos_sx=pointx[mvpoint];
						pos_sy=pointy[mvpoint];
					}

					//outはcss移動なし、大きさそのまま
					if (slice_move_type == 'out') {
						//移動位置配列に位置保存
						mv_posX[k]=pos_sx;
						mv_posY[k]=pos_sy;
					}

					//CSSの設定、inは移動させる
					if (slice_move_type == 'in') {
						chipboxs[k].css({'top':pos_sy,'left':pos_sx,'width':chipW,'height':chipH});
						//透明度設定
						if(opt) {chipboxs[k].css({'opacity':0});}
					}

					k ++;
				}
			}

			//delayを設定する/delay_noで判定
			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_total-1)/2) {kkk=Math.abs(split_total-k)-1;}

					if (delay_no == 0) {delay_st[k]=k*delay_speed;}
					if (delay_no == 1) {delay_st[k]=kk*delay_speed;}
					if (delay_no == 2) {delay_st[k]=Math.abs(k-split_total/2)*delay_speed;}
					//外から
					if (delay_no == 3) {delay_st[k]=kkk*delay_speed;}
					//IE対策、本来は(i+j)
					if (delay_no > 3) {delay_st[k]=(i+j+k/split_total/4)*delay_speed;}
					//拡散、ランダム確率さげる
					if (delay_no == 7 && chgflag) {delay_st[k]=Math.floor(Math.random()*split_total)*delay_speed;}

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

					k ++;
					flag3 *= -1;

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

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

			//原点に戻す
			topbox.css({'left':0});

			//アニメ実行、IN OUT 共用にして、取替え用変数
			var anim_W,anim_H,anim_X,anim_Y;
			var start_opt=1,end_opt=1;

			//スライスアニメカウント
			sliceflag = 0;
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//IN OUT 差し替え
					if (slice_move_type == 'in') {
						anim_W=chip_W[k];anim_H=chip_H[k];anim_Y=chip_pos_Y[k];anim_X=chip_pos_X[k];
						end_opt=1;

					}
					if (slice_move_type == 'out') {
						anim_W=0;anim_H=0;anim_X=mv_posX[k];anim_Y=mv_posY[k];
						//透明度設定
						if(opt) {
							anim_W=chip_W[k];anim_H=chip_H[k];
							end_opt=0;
						}
					}

					//anime/IN OUT共用
					chipboxs[k].delay(delay_st[k]).animate({'opacity':end_opt,'left':anim_X,'top':anim_Y,'width':anim_W,'height':anim_H},speed,function() {
						sliceflag ++;
						//goto slice_image_parts
						if (sliceflag == split_total) {slice_image_parts();}
					});
					k ++;
				}
			}


		}

		//アニメ終了処理
		function slice_image_parts() {

			sliceflag = 0;
			img_url=load_url;

			if (slice_move_type =='in') {
				imagebox.children("img").attr({'src':img_url}).css({'display':'block'});
			}

			topbox.css({'left':box_W,'display':'none'});

			anime_move = false;
			keep_no=no;
			//keep-url
			keep_url=load_url;
			
		};

	});

})(jQuery);

JS名、クラス名など修正したい場合は、html js css 共に該当部分を修正ください。自由な名前で設定できます。


CSS

slice01.css


/* slice01.css 日本語 */

/* tab-menu  */
ul#tab-menu {
display:inline-block;
list-style:none;
width:100%;
height:20px;
margin:0;
padding:0;
}
#tab-menu li {
display:inline;
list-style:none;
width:60px;
height:20px;
line-height:20px;
font-size:11px;
font-weight:bold;
text-align:center;
margin-right:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-top-left:5px;
-webkit-border-radius-top-right:5px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tab-menu li.active {
background-color:#EEEEEE;
}
#tab-menu li:hover {
color:#FFFFFF;
background-color:#FF1493;
}

/* image-box-base */
#image-box-base {
position:relative;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
overflow:hidden;
}

/* image-box */
#image-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
}
#image-box img {
width:100%;
height:100%;
}

#top-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
}

#top-box .slice_bk {
position:absolute;
background-position: 0 0;
top:0;left:0;
overflow:hidden;
}

/* loading */
#image-box-base #loading {
display:block;
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:url("/main/images/loading.gif") no-repeat center center;
background-color:transparent;
}

画像URLなどはサンプルのものです。実際環境に合わせてください。

注意、loadingは一般的によく使用されています、他のJSと競合する場合は、ID名を変えるなどの処置をして下さい。


サンプルをそのまま使用する場合


1. メニューは増やすことが可能です。同じ様に記載ください。
2. CSSは画像サイズを変更ください。
3. JS上部の必要箇所を変更ください。
4. 必要なら画面サイズに合わせて分割数を変更できます。(なるべく正方形に近い方がキレイ)



free分割のデータ

//free分割の設定
var splitHs=[9,9,9,6,4,2,6,10,1,1];
var splitVs=[5,5,5,3,2,2,1,1,5,9];

サンプルでは9x5のサイズが出現し易い

set分割は分割の変化は無い、固定される

-------------------------------------------------------
free分割での最大分割合計

var split_max=50;//最大分割合計

サンプルの基本構造


説明図


図のように、フェード(エフェクト)表示用の作業層(#top-box)を利用して、画像分割したBOX要素を append して構成します。JSは、前ページのものと比較して大きく違っています。


簡単な説明


簡単に説明しますが、スライドなどを組み合わせて実際作るとなると「大変に面倒」です。根気強くやりましょう。
この構造は「IN」「OUT」の表現が出来るようになっています。
また、JSも応用の出来る構成にしています。


説明図


分割画像が複数個あるため、ループで処理しなければならないが、作業ごとにループで処理したほうが判り易い。
特にアニメの部分は、正確な delay() を得るために単純にして置く必要がある。それ以前の処理のループ数などは自由である。



//画像表示処理
function show_image() {

	画像表示前処理
	表示条件をセット

	//アニメ処理前のループは自由設計、まとめても良い
	var k = 0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//背景画像挿入

			k ++;
		}
	}

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

			//初期の大きさ-SET

			k ++;
		}
	}

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

			//delayを設定する

			k ++;
		}
	}

	//アニメ処理ループは分離した方が良い
	var k = 0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//アニメ処理

			k ++;
		}
	}
}

分割を可変にした時の問題

分割を可変にしていますので、「スライス要素」に前の画像があるのも存在する訳です。それを見えなくする処理が必要になります。
「スライス要素」は作った時に「クラス名」を付けていますので、大きさを 0 にして見えなくします。


//slice要素縮小
$(".slice_bk").css({'top':0,'left':0,'width':0,'height':0});

「スライス要素」は作ってある「最大数」以内なら自由に縦横分割できます。サンプルでは配列の数値を利用していますが、その都度ランダムに分割も可能です。


スライス要素を操る

初期移動位置から、元の分割位置に戻るアニメ処理により、様々な変化があるのでそれを設計していくには、様々な条件を与えて、条件により「位置」「大きさ」「透明度」を決定する作業が大事である。
分割によっては見栄えの悪いのも出るので、1つ1つ、アニメ表示を確認、修正設定を行うので、大変な根気が要る。


スライス要素の中央補正

スライス要素の中央から拡大させている。但し画像が拡大するものではなく、表示範囲が拡大するだけである。
スライス要素のXY位置、幅高さの値を変化させれば趣も変わる。


/その場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
pos_sx = chip_pos_X[k] + Math.floor(chip_W[k] / 2);
pos_sy = chip_pos_Y[k] + Math.floor(chip_H[k] / 2);

Math.floor()が無くとも中心補正はできる。移動値、pos_sx pos_sy はあとで保存している。


透過させる場合

このサンプルでは透過処理を行う時は、幅高さの値を変えないで行っている。透過度の設定は自由である。
スライス要素のXY位置の変更を行わない場合は、回転が出来ないため、拡大、透過の選択しかない。


透過させる場合の確率 1/3

//opacity用
var optflag = Math.floor(Math.random() * 3);

ポイント移動の変更(拡散または集合)

移動位置を指定して拡散または集合状態になる、2種類あって、確率10%で出現する。

1. 外周及び中央のデータをランダムに選定して位置決定(同じ場所もありえる)。こちらのほうがキレイだ。
2. ランダムな1点を位置指定。中央の確率が大きい。
3. 必ずしも全ての分割状態にマッチするエフェクトではない。


var pointflag=Math.floor(Math.random() * 20);
が 0 または 1 で有効になる、確率変更可能

//ポイント移動1、全部random位置
if (move && pointflag == 0) {
	//random位置取得
	var p=Math.floor(Math.random() * 9);
	pos_sx=pointx[p];
	pos_sy=pointy[p];
}
//ポイント移動2、位置1点指定
if (move && pointflag == 1) {
	//指定位置
	pos_sx=pointx[mvpoint];
	pos_sy=pointy[mvpoint];
}

対角パターンの補正

対角方向に展開させた場合に中央で、斜めの要素が多数並ぶので負荷がかかり、低機能のマシンでは一瞬動きが止まる。それを修正する。
時間が同時になると負荷が大きいので、パターンが崩れないように配慮して、少し時間差をつけた。


本来は (マシン環境がよければこちらでよい)
delay_st[k]=(i+j)*delay_speed;

補正する
delay_st[k]=(i+j+k/split_total/4)*delay_speed;

全て同時に展開させた場合は、正常である?。全て同時に負荷がかかるので、見た目わからないものと推測する。


delay値の計算

パターン展開を delay() で制御していますので、計算しなければなりませんが、これは各自で行います。
Flashの場合も同じ計算方式ですが、ネットで調べても資料はありません。後で当方で作ったパターンを掲載しておきますが、、、。

色々と計算に必要な変数、カウントなどの標準のループを事前に作っておくと便利である。(サンプルの例)


//Even算出、分割が変わるので再計算
even_v = 1;
if (split_v % 2 != 0) {even_v = 0;}


//delayを設定する/delay_noで判定
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_total-1)/2) {kkk=Math.abs(split_total-k)-1;}

		--- 条件により delay_st[k] の値をきめて行く ---

		k ++;
		flag3 *= -1;

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

計算例


ループのカウント順、縦
k*delay_speed;
横に
kk*delay_speed;
縦、中から
Math.abs(k-split_total/2)*delay_speed;
横、外から
kkk*delay_speed;
対角方向に、補正あり
(i+j+k/split_total/4)*delay_speed;
拡散ランダム
Math.floor(Math.random()*split_total)*delay_speed;

計算式は色々な変数などを使って、個人で作ります。
分割の状態により振る舞いが違う場合があります。その場合には適正に補正することもあります。
反転が有効ならば逆向きになります。

比較的重いので、キレイなパターンで、如何にスムーツに動かせるかが最大の課題である。


パターンの反転

delay値は配列に保存したほうが良い。delay()でパターン展開させるとき反対にするには、delayの値の配列を反転させれば簡単に行える。但しパターンの設計によっては変化無しの時もある。
ここでは、delay値を「delay_st配列」に格納しておき「chgxyflag」の条件で reverse() つまり反転させている。


chgxyflagで適当な確率になるようにする

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

flag3 による交互の判定

スライス要素の交互の並びを flag3 に値 1 -1 どちらか入るように、分割を変えても判定出来る様している。
パターン展開を交互に遅延させる、交互にスライド方向を変えるなどの時に利用します。変数名は任意でよい。


delayed=1で遅延させる条件とすれば
delay配列値に時間をプラスすればよい、500は 0.5秒遅れることになる

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

INとOUT

動作を大きく分類すると「IN」と「OUT」があります。「IN」は外側から移動、又は要素の大きさが拡大して表示される。「OUT」は反対になります。
上層にセットする画像を違わせれば簡単に実現できます。


1. IN 処理

上層に新しい画像をセットする。スライス要素をCSSで移動。アニメが終了したら、下層に新しい画像をセットして上層を移動させる。(2つの画像層を使用したゴマカシ処理です)


移動することは、CSSを設定する行為
chipboxs[k].css({'left':移動先位置,'top':移動先位置,'width':移動先の大きさ,'height':移動先の大きさ,'opacity':移動先の透明度});

元に戻すは、分割した時のデータでアニメ実行する行為
chipboxs[k].delay(計算値).animate({'left':分割時の位置,'top':分割時の位置,'width':分割時の大きさ,'height':分割時の大きさ,'opacity':1},アニメ速度,function() {
	//
});

2. OUT 処理

OUTは、データが逆になるだけ。(移動先データを配列に保存して置くと作業が効率的になる)
上層に古い画像をセットする。下層に新しい画像をセットする。アニメが終了したら、上層を移動させる。


移動しませんので分割時のデータでCSSを設定する
chipboxs[k].css({'left':分割時の位置,'top':分割時の位置,'width':分割時の大きさ,'height':分割時の大きさ,'opacity':1});

計算している移動先の保存データでアニメ実行する
chipboxs[k].delay(計算値).animate({'left':移動先位置,'top':移動先位置,'width':移動先の大きさ,'height':移動先の大きさ,'opacity':0},アニメ速度,function() {
	//
});

アニメ処理は全く同じ形ですから、データを摺り変えれば「共用」に出来ます。


動作、形状などを分類する

単に分割して表示するには簡単ですが、規則性を持たせてスライドする、2ドア、4ドア、バーチカル、ホリゾンタル、スライス、など色々と考えると、一気に面倒になります。
旨く「条件分類」して組み立てて行くことが重要になります。


異常に手間隙がかかります

エフェクトを増やすと、主に確認作業ですが途中で嫌になるほど面倒です。当然手間隙もかかります。工夫するほか方法はありません。
そんな時には「イイカゲン」に作りましょう。


将来的にはCSS3の回転など加えれば、よりFlashに近くなるでショウ。


Loading画像など

使用画像は原則、使用者がご用意ください。Loading画像は好きなものが使用可能です。

loading.gif 31x31 :




前ページの記事も参考ください。

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

簡易SLICE-PHOTOシリーズ記事も参考ください。(1-7)

【参考】当方の記事: 簡易SLICE-PHOTO 1


エライ判り難いと思いますが、以上です。

 


[ この記事のURL ]


タグ:slice , memo , photo , jquery

 

ブログ記事一覧



[1]