Material motionに取り組む
それまでのHolo Designに比べると、LayerやShadowの考え方、アニメーションなど多くのことを考え直す機会となりました。
2016年現在では、多くのアプリがMaterial Designを取り入れて提供していますがガイドラインに載っているものが全て簡単に実現できるものではありません。
というのも、ユーザが利用しているAndroid端末のバージョンが全て最新というわけではなく、Googleが提供しているMaterial Design用のAPIがAndroid 5.0以上のモノだったり、下位互換用として提供されているSupport Libraryにも含まれていないようなコンポーネントやアニメーションが多くあります。
AbemaTVの直近データでは、下記の図のような利用割合になっています。
このデータを見ると、約40%もの端末がそのAPIを呼べなかったり、OSが新しい場合でも端末の性能が追いついていないと、アニメーションの動きが悪くなったりします。
これが、昔からAndroid開発現場を苦労させてきた要因の1つでもあります。
今回は、それを含めて、使えそうなLibraryも紹介していきたいと思います。
Material motion
2016/5/10 Material Design GuidelinesにMaterial motionの項目が追加されました。このガイドラインは、公開されてから10回近く更新されています。
今後も新しいコンポーネントが追加されたり、もしくは既存のものが非推奨となっていく可能性があるので、エンジニア、デザイナ共に確認していく必要があります。
How does material move?
Transition FrameworkAPI level 21で大きく追加されたTransitions Framework には Acitivy間のアニメーションに関するAPIが追加されました。
しかし、これでは Android 5.0+でないと利用できません。
それをAndroid 2.2+までBackportしたTransitions EverywhereはGithubスターが1000+されており、メンテナンスもされているので、参考にできるかと思います。
Transitions Frameworkに関するAPIの使用方法などはMaterial-Animations がおすすめです。
Arc
これまで直進的な移動を行うアニメーションが多かったと思います。
実世界では、重力が存在するので、それをアプリ内でも感じるようなものにして行きたいという意図があります。
参考:Movement
このように円を描くようなアニメーションを行ないたい場合はArcAnimatorを参考にすると良いと思います。
しかし、このlibraryはDEPRECATEDとなっているNineOldAndroidsを利用しています。
NineOldAndroidsを含めたくない場合は、実装を参考にしてみましょう。
このようにReveal Effectを実装したい場合にはCircularRevealが参考になります。
ただ、Revealはカクカクしたような動きがあると逆に体験が損なわれるので気をつけたいポイントです。
AbemaTVでも導入しました。
What makes a good transition?
ここで紹介したlibraryを利用しても、遷移先のActivityを透過にしないと綺麗なアニメーションにならない場合が多くあります。その場合、themes.xml等で android:windowIsTranslucent を指定することになりますが、API level 19+でないと使えなかったりするので、対応できるものだけに処理を分けるほうがいいと思います。
Motion is quick
アニメーションで、ユーザを長く待たせるようなことはしてはいけません。
その動作を見た時に最初は良いと感じるかもしれませんが、普段使ってもらうような、アプリにしたい場合は、画面遷移する度にストレス無く遷移できるよう調整する必要があります。
参考:Duration and easing Motion is clear
全ての要素に対して、なんでもアニメーションさせればいいというわけではありません。
良く見せたい要素に対してのみ行ない、ユーザを混乱させてはいけません。
Motion is cohesive
Material Designでは、要素のアニメーション時間を合わせるほうが望ましいという考えがあります。
参考:Duration and easing
これを守らなくてはいけないというわけではなく、ユーザ体験として考えた場合に
最良のアニメーションを時間かけて決めていくのが一番いいと思います。
Implications of motion
タップした要素が、次の画面の要素と関係することを明確にしてあげるのが望ましいです。また、タップした要素を次の画面に引き継ぐことで、ユーザのローディングに対するストレスを軽減が期待できます。
Conclusion
アニメーションは、本当に良い物を作ろうと思うと時間がかかります。今回は、その全てを載せたわけではないので改めてガイドラインを確認してみてください。
参考記事:Material Design Guidelines
また、他にも以下のGithubで色々なlibraryをリスト化しているので参考にしてもらえればと思います。
Awesome Android UI: https://github.com/wasabeef/awesome-android-ui