iphoneでアニメーションgifは激重。。

スマートフォン向けのmixiアプリでアニメーションgifを試す。
いろいろなサイトでアニメーションgifは機種依存が大きいからやめたほうが
良いとあるものの、どんなものだろうと試してみる。
手持ちのAndroid機Desireで試すと比較的綺麗に見れるものの、知人に借りたIphoneで試すと
激重で再生どころではなかった。。

canvasを使用してパラパラ漫画みたいに書くしかない。。
あまりサイトに複数の画像を連続で描画するようなサンプルが掲載されておらず、
なんとなく手探りで作成。

合ってるのかよくわからないが、Android機ではひとまず動いた。
明日またIphone貸してもらって動かしてみよう。。

①Flashから連続したpngファイルを作成。結果１２０枚の画像。
極力ファイルサイズをそぎ落とす。


②canvasを使用して連番になったpngファイルをすべて読み込み、１枚ずつ再生。

<canvas id="canvas" width="320" height="180" style="border:1px solid #CCC;">
<script type="text/javascript">
//画面サイズ
var cW=320;
var cH=180;
var imgNo=1;
//最大フレーム数
var flame_num=120;
//読込
var images = new Array(flame_num);
//読み込み完了フラグ
var read_flag = 0;

//Canvasの準備
var canvas=document.getElementById('canvas');
if (!canvas||!canvas.getContext) return false;
var ctx = canvas.getContext('2d');

//実行
read();
setInterval("setMove()",100);
function setMove(){
	if(read_flag == 1){
		imgNo+=1;
		if(imgNo>flame_num){imgNo=1;}
	}
	draw(imgNo);
}
function read(){
	for(var i=1;i<=flame_num;i++){
		images[i] = new Image();
		//0埋の４桁
		var img_num = ('0000' + i).slice(-4);
		var img_name = "img";
		img_url = "http://aaaaa/gif/"+img_name+"_"+img_num+".png";
		images[i].src = img_url;
	}
	//全フレームの1/3が読み込まれたら動作開始
	images[flame_num/3].onload = function(){
		read_flag = 1;
	}
}
function draw(imgNo){
	//全て画像が読み込まれてから開始（それまでは）
	if(read_flag == 1){
		ctx.drawImage(images[imgNo],0,0,cW,cH);
	}else{
		ctx.drawImage(images[1],0,0,cW,cH);
	}
}
</script>