非FLASHアニメーション手法~画像のストリーム表示~in work

 
date:2011.07.28   posted by:asai
 
write my essay for cheap

p>最近、体型のことばかり指摘されるのが割とストレスになっている浅井です。

今回から何回かに分けてcanvas+CSS3+jqueryで実装されたサンプルを通して、FLASHを用いないアニメーション手法を紹介したいと思います。

サンプル

上記サンプルはFlickrからリアルタイムで取得した画像がストリーム表示され、移動中の画像をクリックすると、クリックした列を中心にくるくるとフェードアウトしていきます。
サンプルではそこまでの実装で力尽きたので、もう一度見たい場合はブラウザをリロードしてください。

さて、今回のサンプル。chromeとそれ以外で動作が若干異なりますので、chromeとそれ以外のブラウザで動作を確認してみてください。(古いIEでは正常に動作しません)

上記サンプルの動きは大きく分けて2つ。

1.サムネイル画像のストリーム表示
2.クリックした後の列の回転

今回は1について解説します。

※FLASHを使わないサンプルということで、初めはHTML5のcanvas+javascriptでの実装を考えました。
が、canvasは複雑な処理も実現可能な代わりに、処理速度がマシン・ブラウザに依存してしまい、かつ動作も早いとは言えないため激しく画像を動かす用途には向きません。
ということで、今回はCSS3+Javascriptで実装してあります。

■サムネイル画像のストリーム表示
ストリーム表示を実現しているのは以下のソースです。

//列数を保存
var line_amount = $('.line').size();

//アニメーションスピード
var scrollSpeed = new Array(0.4,0.5,0.4,0.5,0.4,0.5,0.4,0.5,0.4,0.5,0.4,0.5,0.4,0.5,0.4,0.5);

function init() {
	for(var i = 0 ; i < line_amount ; i++ ){
		//列高さ
		height_list[i] = $("#line"+i+" div").height() /2 * (-1);
		$('#line'+i+' div.down').css("top",height_list[i]+"px");
		$('#line'+i+' div.upper').css("top","0px");
		//初期位置
		line_top[i] = height_list[i];
	}
	//ループ処理
	setInterval(function(){
		for(var t = 0 ; t < line_amount ; t++ ){

			if( $("#line"+t+" div.upper").size() > 0 ){
				//画像のサイズまで移動したら0に戻る。
				if (line_top[t] <= height_list[t]){
					line_top[t] = 0;
				}
				//scrollSpeed分移動
				line_top[t] -= scrollSpeed[t];
				$('#line'+t+' div.upper').css("top",line_top[t]+"px");

			} else {

				//画像のサイズまで移動したら0に戻る。
				if (line_top[t] >= 0){
					line_top[t] = height_list[t];
				}
				//scrollSpeed分移動
				line_top[t] += scrollSpeed[t];
				$('#line'+t+' div.down').css("top",line_top[t]+"px");

			}

		}
	}, 1);
}

ポイントは
imgタグの移動ではなく、background-imageを指定したdivを移動させている
→理由は不明なのですが、この指定をすることでモダンブラウザでのアニメーションの滑らかさが上がりました
アニメーションスピードのブラウザごとのチューニング
→ランダムに生成するのではなく、列ごとの速度を決め打ちすることでブラウザ間の差異を少なくしています。
の2つ。

また、縦横のみのアニメーションに関してはjqueryで十分に実装可能なので、大量に画像を扱う場合はcanvasではなくjqueryを選択すること自体が一番大きなポイントとも言えます。
様々な実装方法が可能になった今だからこそ、「何で実装するか」を実装前にしっかりと検討することが大事になってきましたね。

次回は画像列の回転について解説します。技術的にはCSS3とJavascriptがメインです。

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