Animation - Authentic Motion
本ドキュメントは学習のため、Material Design Specificationを独自に翻訳したものです。本家ではないことが分かるように白黒反転をしています。

本物のモーション

物体の具体的な形に対する認知は、それをどのように扱うのかを理解する助けとなります。物体の動きを観察することで、それが軽いのか重いのか、柔らかいのか固いのか、小さいのか大きいのかを理解することができます。マテリアルデザインにおけるモーションはただ美しいだけでなく、その空間的な関係、機能性、そしてシステムが意図することを伝えます。

質量と重み

現実世界の物体には質量があり、それに対して力が加わった時のみ物体は動きます。それゆえ物体は急に動いたり止まったりすることはできません。突然始まったり急に停止するアニメーションや急激に変化するアニメーションは不自然であり、期待されるものではなく、ユーザーにとって不快であり混乱を与えます。

ベストプラクティス

マテリアルデザインにおけるモーションの重要な側面は、優雅さ、シンプルさ、美しさを損なう事なく、物理的な感覚を維持することです。それはシームレスなユーザー体験を提供します。ここにいくつかのガイドラインを示します。このガイドラインはこれらのコンセプトをアニメーションに反映する場合に役立ちます。
Do.
急激な加速と緩やかなモーションは自然であり快適さを与えます。
Don't.
直線的な動きは機械的です。モーションの始まりと終わりにおける急激な速度の変化は、物体が急に動き急に止まることを意味します。これは現実的ではありません。

特別な場合:入場と退場

物体が画面内に入ってくる場合には、そのアニメーション内で最も速い速度で入場するようにすべきです。これは現実世界における動きのエミュレートです。人が視界に入ってくる場合に、その人は視界の境界から歩き始めるわけではなく、その前から歩き出しています。同様に物体が画面外に出て行く場合には、速度を落とすのではなくむしろその速度を維持します。画面内に入ってくる場合にイーズインを行い画面外に出て行く場合にスローダウンするとユーザーの注意を惹きますが、多くの場合それは望むものではありません。
Do.
入場と退場では、そのアニメーション内で最も速い速度です。これにより素晴らしいトランジションを作り出すことができます。
Don't.
入場時にスピードアップして、退場時にスローダウンしています。不必要な変化でユーザーの注目を惹き付けるべきではありません。

Making adjustments

全ての物体が同じ動きをするわけではありません。軽い/小さな物体は質量が小さく、少ない力で動かすことができるので、加速と減速はより速いでしょう。大きな/重たい物体はピークの速度に達したり停止するためにより多くの時間が必要です。これらがアプリケーション上の様々なUIにどのように適用され、その結果それぞれのUIがどのように動くべきかを考えてみてください。