写真の水面を揺らす原理はパラパラめくり、遅いIEは枚数制限

qlake.js
を使って水面を揺らしたとき、IEを使っていると数十分動き出すまでにかかることがあった

原理はパラパラめくりでなので、何枚の場面を裏で事前に準備するかだが。
欲張って、滑らかな動きを作ろうとすると数十枚作ることになる

たとえば600x400の写真だと、写真1ピクセルがRGBA(Aは透明度)の4ピクセル使うので
600x400x4=960,000回も移動操作をして1場面を作る。

30枚作るとすると3千万回処理することになる。

その準備にIEだと約15秒かかるのだ。

パラパラめくりなので、しょせん目の残像と錯覚を利用したもの
間引いて10枚にして、見てみたが、比べない限り品質に大差ない画面になった。

IE以外が30枚でも数秒で処置する。
そこで、ブラウザを判別してIE以外は高品質で、IEだったら10枚に間引く、というシステムにして
動き始めるまで5秒以内とすることができた。

5秒なら、あまりストレスにはならないと思う。

ソースは
画面の中の一部を揺らす

1、池ぬような滑らかなうねりには
http://qpon.quu.cc/jquery/wave/

2、川のような流れる動きには
http://qpon.quu.cc/jquery/swave/

画面の下に鏡像を作って揺らす

3、池ぬような滑らかなうねりには
http://qpon.quu.cc/jquery/lake/

4、川のような流れる動きには
http://qpon.quu.cc/jquery/slake/

4システムを用意しましたので、作品に適したソースをご利用ください
当分は、改良が続くので、個人の場合は直リンクでご利用ください

この記事へのコメント

この記事へのトラックバック