World Wide Windblue: iOSのUIWebViewでアニメーションを滑らかにする(アクセラレータで)

2012年7月8日日曜日

iOSのUIWebViewでアニメーションを滑らかにする(アクセラレータで)

JavaScriptでタイマーを張ってのアニメーション

それだと、iOS(特にiPod touch)ではマシンパワーが足りないのでカクカクしてしまいます。

でもハードウェアアクセラレータを有効にすると、滑らかになります。

このエントリの目次

アクセラレータが効いているかを確認する
アクセラレータを効かせる方法
検証用ページを作ってみた
検証用ページをシミュレータで確認してみる
さいごに

1.アクセラレータが効いているかを確認する

iOSシミュレータで確認できます。

下記のようにiOSシミュレータを起動した状態で、ブレンドレイヤー（カラー）を有効にすると確認できるようになります。

有効にすると、画面が赤と緑で塗りつぶされるようになります。
赤い部分がアクセラレータが効いている領域で、緑の部分が効いていない領域です。
(下の図でいうと、シミュレータ画面下部の「戻る」、「進む」「更新」ボタンなどです)

2.アクセラレータを効かせる方法

iOSのアクセラレーターが使えるCSS3 | ゆるふわWebデベロッピングによると、CSS3のtranslateを使うとハードウェアアクセラレータが有効になるようです。

translateが使えないとき

でもUIの仕様によってはtranslateが使えない場合もあると思います。

そんなときは、アニメーションをさせたいDOMに対して

-webkit-transform: translate3d(0, 0, 0);

もしくは

-webkit-transform-style: preserve-3d;

というCSSを適用すると、その領域のアクセラレータが有効になります。
(GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 | 5509より)

3.検証用ページを作ってみた

サンプルとしてアクセラレータがきいていないページとアクセラレータがきいているページを作ってみました。
あるdiv領域をタップすると、それが大きくなったり小さくなったりするだけの簡単なページです。

動作を確認するときは、作ったサンプルアプリ(GitHub)をインストールしてみて下さい。
(UIWebviewで検証ページを表示しているだけですが、アプリじゃないとアクセラレータがきいているかどうかシミュレータで確認できません)。
それが面倒くさい場合はiOSのsafariで検証用ページを開いてみて下さい。

アクセラレータがきいていない方が若干カクカクして見えます(このレベルのアニメーションだとよく見ないと違いが分かりませんが)。

4.検証用ページをシミュレータで確認してみる

上記ののサンプルアプリをXcodeで開いてください。

アクセラレータがきいていない場合は青の部分がそのままの色で表示されています。

一方、アクセラレータがきいている場合は青の部分に赤色が重なって紫色になっています。
意図したとおりにアクセラレータがきいています。

5.さいごに

実は僕のCSS力が低くて、本当はどんな場合もtranslateを適用できるのかもしれませんが...。
でもサクッとチューニングできるので、工数が足りない場合に使えると思います。

参考にさせて頂いたサイト

World Wide Windblue