Life is beautiful

　昨日発表した、iPhone用アニメーション・スクリプトianime.js、遅いという評判のiPhoneのJavascriptを使って、いったいどのくらいの数のオブジェクトを同時に動かすことができるかを測定するページを作ってみた。

回転なし：http://satoshi.blogs.com/ianime/test16.html

回転あり：http://satoshi.blogs.com/ianime/test17.html

　５０個のアイコンを表示し、クリックしたアイコンから下のアイコンすべてを同時に１秒間アニメーションさせ、最後に何フレーム描画することができたか(fps)を表示する仕組みだ。setInterval()には33msecを与えているので、最大で30-31フレームは表示できるはず（実際パソコンで実行すると50個全部動かしても余裕で31フレームになる）。Javascriptの実行がそれに追いつかなければ（つまり、１フレームあたりの処理が33ms以内に終わらなければ）、「フレーム落ち」を起こし、数値が30未満になる。

　iPhoneで測定した結果は以下の通り（回転あり、回転なし、の順）。

５０個：11 fps, 8fps
４０個：12 fps, 9fps
３０個：14 fps, 11fps
２０個：16 fps, 13fps
１０個：19 fps, 16fps

　用途にもよるが、２０〜３０個ぐらいのオブジェクトをぐりぐりと動かすのはなんら問題がなさそうである。「ギャラクシアン」ぐらいのアニメーションなら十分に可能なスピードだ。

　興味深いのは、アイコンの回転という複雑なことをさせても、あまりスピードに影響がないこと。やはり、「javascriptの実行そのものはあまり早くないが、描画そのものはGPUのおかげでかなり高速化されている」という話は本当らしい。これがCPUの問題なのか単にjavascriptの実装が悪いのかは不明だが、少なくともcanvasの実装だけはなかなかなので、canvasに頼った形でアプリケーションを作ることがiPhone用のインタラクティブなアプリを作るこつではあるようだ。

　下に貼付けたのは、回転がある方のテスト・ページ。Safari、Firefox では動作確認済み（IEは未サポート、Operaでも動くとの報告を受けている）。適当なアイコンをクリックすると、アニメーションが始まる。