Android2.3で画像をズームアニメーションするときのバグ

Android2.3で画像をズームしていく、みたいな演出をする時。
こんなかんじのソースを書いたのだけど。

	$(window).on('load',function(){
		var gameW = $('.gameWrap').width();
		$('.gameWrap').css('height',gameW);
		$('.gamebg').animate({width:gameW*3,top:-gameW,left:-gameW},3000);
	});

実際の画像のサイズ以上に拡大すると表示がバグった。
元から画像サイズを一番ズームしたい状態と同じ解像度で書き出して、
通常時は縮小表示してやるようにしたら治った。

例えば幅640pxの画像を三倍にズームしたい場合、
用意する画像は1920pxであればよい。
画像書き出しの際には、幅640pxの画像と同じ重さになるまでがっつり圧縮をかけてやる。

retinaディスプレイ対応の際に、2倍サイズの画像を高い圧縮率で保存して、1/2に縮小して使うという方法が提唱されていたのだけど、それと同じ考え方ですね。

参考サイト様
Retina revolution

投稿者:

ayako0802

フロントエンドエンジニア