非FLASHアニメーション手法~CSS3,jsでの3D回転~in work

 
date:2011.07.29   posted by:asai
 

浅井です。

FLASHを用いないアニメーション手法第2回目はCSS3,Javascriptを用いた画像の3D回転です。

サンプル

上記サンプルは前回と同じものです。前回、画像のストリーム表示部分を解説したので、今回はクリック後の動作(画像の回転→フェードアウト)部分について書いていきたいと思います。

■CSS3,Javascriptを用いた画像の3D回転

【javascript】

$(function(){

	$("div div",line_cache).click(function(){
		img_src = $(this).css('background-image').replace(/^url|[\(\)]/g, '').replace(/\_m.jpg/ig, '_z.jpg').replace(/\"/ig, '');
	});

	line_cache.click(function clickanime(id){
	if(loop_count < 100){
		with ({loop_count:loop_count}){

			if(first_click == 0){
				//初回のループ時はクリックした列をthisで取得
				var id = $(this);
				id.addClass("menuLine").next().addClass("menuLine").prev().prev().addClass("menuLine");
				first_click = 1;
				kurukuru(id);

			} else {
				kurukuru(id);
			}

			if(strUA.indexOf("firefox") != -1){
				//id.fadeOut("slow");
				id.rotate3Di(270, 800);
			}
			else if(strUA.indexOf("opera") != -1){
				id.rotate3Di(270, 800);
			}
			else if(strUA.indexOf("chrome") != -1){
			}
			else if(strUA.indexOf("safari") != -1){
				id.rotate3Di(270, 800);
			}

			if(id.next().size() != 0 ){
				var id_next = id.next();
				var id_next_css = id.next().css("opacity");
			}

			if(id.prev().size() != 0 ){
				var id_prev = id.prev();
				var id_prev_css = id.prev().css("opacity");
			}

			setTimeout(function(){
				if(id_next_css == 1 && id_prev_css == 1){
					clickanime(id_next);
					clickanime(id_prev);
				} else if(id_next_css == 1 && id_prev_css != 1){
					clickanime(id_next);
				} else if(id_next_css != 1 && id_prev_css == 1){
					clickanime(id_prev);
				} else {
				}
			}, timeout/2);

		}//with end
	}//loop_count IF end
	});
});

//クルクルフェードアウトアニメーション
function kurukuru(id){
	id.addClass("animation");

	setTimeout(function(){
			id.css("opacity","0").removeClass("disp");

			if(line_count==6){
				alert("wea");
			}

			loop_count++;
	}, timeout);
}

【CSS】

.animation {
-webkit-animation-name: rotate1,fade;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 2s;
-moz-animation-name: 'rotate1,fade';
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-moz-animation-duration: 2s;
}

@-webkit-keyframes rotate1 {
100% {-webkit-transform: rotateY(360deg)}
}
@-moz-keyframes 'rotate1' {
100% {-moz-transform: rotateY(360deg)}
}
@-webkit-keyframes fade {
100% {opacity: 0;}
}
@-moz-keyframes 'fade' {
100% {opacity: 0;}
}

CSS3の「-webkit-transform: rotateY」を使うことでスムーズな回転を実現できます。
(基本的に、アニメーションの滑らかさはCSS3>jquery>=canvasという認識です。)

ですが、rotateYはまだchrome以外のブラウザでは実装されていないため、jqueryのプラグイン「rotate3Di」を代替手段として使用しています。スムーズさではCSS3に劣りますが、ほぼ全てのモダンブラウザで実行可能な利点があります。

また、フェードアウト処理についても同様に基本はCSS3での処理となっています。

FLASHを不使用のアニメーションは、
・単純な動作はCSSで
・実現できない部分をjavascript(あるいはCanvas)で
という使い分けが重要になります。ブラウザによってCSS3の実装段階は異なるので、作業着手前に対象ブラウザと使用するCSSのプロパティがどのブラウザで実装されているかをしっかりと確認するようにしてみてください。

次回はcanvasを使ったアニメーションについて解説します。

custom essay order
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none