ianime.js、iPhone/iPod touch 用アニメーション・ライブラリ
gPhone雑感:「モバイル・プラットフォーム戦国時代」の幕開けだ

iPhoneのベンチマーク:javascriptの実行は遅いがcanvasがなかなか

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

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

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

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

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

50個:11 fps, 8fps
40個:12 fps, 9fps
30個:14 fps, 11fps
20個:16 fps, 13fps
10個:19 fps, 16fps

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

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

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

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)