PhoneGapを使いiOS上でjQueryMobileを使うとアニメーションが変
環境。
フレームワーク | Version |
---|---|
Cordova | 2.0 |
jQueryMobile | 1.1.1 |
iOS | 5.1 |
PhoneGapでjQueryMobileを使ってtransitionをいくつか指定して試すと素敵なアニメーションをしてくれた。ページ遷移してからアニメーションしたり、flip指定すると2回も回ったりとなんか素敵。slideを指定すると一部がちらついたりもする。
viewportでwidthを640px指定していたのだけど320pxだとほぼ正常な動作をする。このことから解像度の違いで処理できないことがわかるんだけど、mobile safariで開くとちゃんと動いたりする。一応同一ページのコンテンツ遷移ならどうかとかプリフェッチを利用したらどうかとかとか試したりした。
で調べていくとデバイスのパフォーマンス表を作成された方がいた。
The Great HTML5 Mobile Gaming Performance Comparison - Scirra.com
どうやらPhoneGapもといUIWebViewだと処理速度はだいぶ遅くなるらしい。というかそもそもJITがないらしい。じゃあ単純に処理速度が足りないのかと思ったらどーもそうじゃないらしい。
iPadで640px指定でページ遷移をさせると同様のアニメーション結果になるが、device-width指定(768px)だと正常にアニメーションが行われる。つまり解像度が大きいから処理が追いつかないんじゃなくて端末の横の解像度とコンテンツの横の解像度指定があっていないと表示の調整処理でちらつきやその他不具合が発生していると考えられる。
結論としてPhoneGap + jQueryMobileで開発するのならviewportはdevice-widthを指定して画面を作成し、画像だけはretina用も用意するというのが良いようだ。Retinaであろうと解像度は変わんないということですね。はい、頑張りました。
(追記)2012-09-04 22:31
slide系はiPhone4だとやっぱり変でしたorz
slidefadeは割とうまく動くんだけどなぁ…。
(追記の追記)2012-09-05 16:32
以下の記事を参考にして書いたら綺麗に動いたー!
Fixing flickers & jumps of jQuery Mobile transitions in PhoneGap apps | outof.me
最終的にはjQuery Mobileのバグでいいんでしょーか。