こんにちは。開発担当の金内です。
みなさん、Sleipnir Mobile for iPhone / iPad を使っていただけているでしょうか？
今日は Sleipnir Mobile の特徴となっている「TouchPaging」を開発したときの経験から、iPhone / iPad アプリ開発でスムーズなアニメーションを実現するためのコツをご紹介します。
タブをスワイプ操作で切り替える TouchPaging は、開発中のある段階で機能としては実現できたものの、スワイプ中のアニメーションがどうにもこうにもガクガクしていて、心地よいとは言えないものでした。はじめのうちは iPad のパフォーマンスの限界かと思っていたのですが、「いや、こんなハズじゃない」という意見が開発チームで持ち上がり、改善に向けた取り組みがはじまりました。
パフォーマンス問題なら Instruments の出番です。
Apple のドキュメントなどいろいろ調べつつ、Instruments とにらめっこしつつ、ソースコードと格闘した結果、効果的と考えられるポイントが見えてきました。
フレームレートは40以上、できれば50を目指す
改善の第一歩は計測することです。Instruments の「Core Animation」モジュールでは、アプリケーションでのアニメーションのフレームレート（FPS）を表示してくれます。開発中「ガクガクしている」段階の TouchPaging の FPS は 25 から 30 前後でした。スムーズと感じられるアニメーションにするためには、少なくともFPS 40、できれば 50 以上を目指したいところです。
残り2つのポイントはこの数字を引き上げるためのものです。
透明な要素を減らす
アニメーションする要素に透過するピクセルがあると、各コマで背景との合成処理が発生するため FPS に悪影響が出ます。とにかく透過するものをゼロに近づけましょう。
Instruments で「Color Blended Layers」をオンにすると、透過により合成が発生している部分が画面上で赤く表示されます。
こんな感じです。
この赤い部分を何とか減らして緑色にしていけば、確実に FPS が向上します。
見落しがちなのが PNG イメージにあるアルファチャンネルです。イメージに透過部分がなくてもアルファチャンネル付きで保存してあるだけで合成処理が走ってしまうので、不要なアルファチャンネルがついたまま保存されていないか確認してみましょう。
TouchPaging も透過を減らして FPS がだいぶ上がりました。しかし、それでもまだ心地よいレベルには逹していませんでした。
オフスクリーンレンダリングを減らす
さらに FPS を上げるためにはオフスクリーンレンダリングを疑ってみましょう。ここで言うオフスクリーンレンダリングはプログラマが意図的にするものではなく、iOS 側のグラフィクス処理の過程で自動的にオフスクリーンでレンダリングされているものを指します。これも FSP に悪影響を与えます。
Instruments で「Color Offscreen-Rendered Yellow」をオンにしてみると、オフスクリーンレンダリングされている部分が黄色く表示されます。透過といっしょで、黄色い部分をできるだけ減らせば良いわけです。
が、オフスクリーンレンダリングはいろいろな条件で発生するため、コレという解決策がなかったりもします。そうなんです。やっかいなんです。
TouchPaging では、アニメーションに使っている CALayer に shadow プロパティで影を付けると、オフスクリーンレンダリングが発生することがわかりました。あれこれ悩んだ結果、CALayer の機能を使わず独自に影を描画することで、オフスクリーンレンダリング部分もほぼ無くなりました。
かくして、TouchPaging は FPS が 60 前後まで向上し、現在のようなスルスルと心地よい動きを実現できたわけです。
まとめ
Instruments の「Core Animation」モジュールを活用したアニメーションのパフォーマンスチューニングのためのポイントを紹介しました。なめらかなアニメーションは iOS のキモですから、自分たちのプロダクトでも「めっちゃ気持ちいい!」と感じてもらえるようこだわりたいものです。
今回の題材となった TouchPaging を未体験の方は、この機にぜひ Sleipnir Mobile for iPhone / iPad を試してみてください。
関連記事
