Parallaxエフェクトとは
tvOSではお馴染みのParallaxエフェクト。かっこいいですね。
Parallaxは奥行き的な意味らしく、よく見ると確かに画像が何層かに分かれて表示されています。
Parallaxエフェクトを用いると、よりtvOSらしい体験を作り上げることができ
ます。
運用方法
このような画像を用意するには、以下のいずれかになります。
- Parallax Exporter Adobe Photoshop plug-in
- Xcodeのアセットカタログ
- layerutilコマンド
以下のページでざっくり紹介されています。
https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/layered-images/
いずれも静的に作成してアプリにバンドルするかサーバに配置するかで、動的にアプリ側で生成する方法は今のところ提供されていません。
自分で実装できるのか？
ではこのParallaxエフェクトを自分で実装することはできるのでしょうか？
自前で実装するためには、上で説明した奥行き効果に加えて、以下のようなポイントを抑える必要があります。
シャドウ
以下のように透明な画像を用意して見てみると、影が拡大やモーションに応じてアニメーションしています。
フォーカス移動の方向による細かい動き
さらによく見ていくと、フォーカスが隣に移動した時は移動した方向に少し引っ張られて元の位置に戻るようなモーションがかかっています。微妙に右に引っ張られているのがわかりますか？
光の反射効果
ぐりぐり回すと、画像の角度によって光が反射しているエフェクトがかかっています。
このように見れば見るほど細部まで作り込まれていて、なかなか自前で実装するのは難しいかもしれません。
まとめ
Parallaxエフェクトの紹介でした。
Apple謹製のMovieアプリなんかを見ていると、結構Parallax画像をちゃんと用意しているコンテンツも多いです。AppleTVのアプリを作る時は、ぜひサムネイルのParallax対応を検討してみてください。
Parallaxエフェクトの自前実装については、 @dekatotoro が本アドベントカレンダー「Parallaxエフェクトの独自カスタム実装をしてみる」の記事で解説してくれそうなので、そちらも参考にしてみてください。