先月のことですが、ついに iPhone4(sじゃないです) を機種変して iPhone5s に機種変しました。
ちょっと大きくなった本体と、ガラス背面と側面のフレームのくぼみが無くなって手にフィットしなくなったのにちょっと戸惑いつつも、 文字を打つだけでアプリが落ちたり、ホームボタンがなかなか効かない現象から開放されたことが何より嬉しいです。
Canvas の動作を比較してみることにしました
という訳で4 → 5s でどのくらい Canvas の処理能力が上がったのかをチェックしました。
今回はそのままお持ち帰りしてきた iPhone4 との比較を行っています。
検証環境
iPhone4, iPhone5s 共に iOS 7.0.4 でブラウザは Safariを使用しました。
プログラム中で使用したライブラリ
Canvas のAPIを扱うのに CreateJS(EaselJS)を, FPS を表示させるのに stats.js を利用しています。
その1.たくさんのシェイプを同時にアニメーション
まずは一つ目。
直径1pxの円を500個の配置して、それぞれが一定の高さまでいってまた元の位置に戻る。 また、高さの位置によって対応した色へ変えるといったアニメーションを全ての要素へ同時に適用させます。
繰り返し処理の管理は EaselJS の Tickerクラスに任せています。
今回、配置するそれぞれの円で必要となるのは位置と色の情報くらいなので、 EaselJS の Shapeクラスは使わずに Canvas の API を直接叩いて円を描き、
位置情報のみを Pointクラスに持たせるようにして、処理負荷を抑えてみました。
左が iPhone4, 右が iPhone5s です。
Ticker.setFPS で設定した FPS は 60です。
canvas performance iPhone4 vs iPhone5s from turusuke on Vimeo.
実際に動く Demoは → こちら
iPhone5s がとてもヌルヌル動いていたのにビックリしました。 ほぼ60に近いFPSを保っています。
その2.Canvas 領域で指を動かすとアニメーションするシェイプがたくさんでてくるやつ
次は Canvas 上で指を動かすと、動かした分だけ要素が生成されるようなものです。 生成されたシェイプは円を描きながら外へと出ていきます。
Canvas 上で指を動かすと〜といった処理は Stage クラスのインスタンスに stagemousemoveイベントを登録して実現させています。
iPhone4
では早速、iPhone4 から
test2 iPhone4 from turusuke on Vimeo.
さっきのデモよりは見れる感じでしょうか。
iPhone5
続いて iPhone5s です。
test2 iPhone5s from turusuke on Vimeo.
先ほどの動画と比べると、iPhone4 ではワンテンポ遅れて描写されていましたが、5s だとピッタリくっついてきますね!
このデモは右のリンクから試せます → こちら
終わりに
これで(iPhone版 Safariにターゲットを絞るなら)ごりごりのフル Cavans サイトをバンバン作れるぞ〜となったのですが…
iOS7 から搭載された左/右にスワイプすると戻る/進むの機能や、 下から上にスワイプすると出てくるコントロールセンターなどを考えると大きな指の動きをするようなコンテンツは難しいのかな…と思ったりしました。 (現場の方はどうしてるんだろ…)
とはいえ今までよりちょっと無茶させるくらいでもヌルヌル動くようになったのはうれしいですね。エフェクトの演出に関してはバンバン使えそうですし。
