前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。

前章 : マテリアルデザイン - モーションデザインを理解すること

引用元 Google - Material Design
Speed - Material Design
※動画像データもこちらから引用させていただいております。
しっかりとした情報が欲しい方はコチラをご覧ください。
(※スマホから元サイトに飛ぶとページが上手く表示されないようです。元サイトはPCから見ることをオススメ致します。)

速度について

速度の調整を行うとトランジションが反応しやすいスムーズなものになります。

速度の調整

トランジションの速度はUIの変化する速度を可視化します。速度は主にデュレーションの調整によって制御されますが、イージングや要素の移動距離でも制御することが出来ます。

※トランジション : 画面の変化
　デュレーション : トランジションの継続する時間
　イージング : 動きの緩急。モーションデザインで特に重要な概念。

イージングの調整はデュレーションに影響を与えることがあるため、デュレーションを調整するまえに正しいイージングを適用します。

- 使い方

適切なトランジション速度はユーザーに複雑な操作を与えず、UIの変化を理解させる手助けになります。急すぎたり不快ではない最短のデュレーションを使う必要があります。

良い例
素早く簡単に実行出来るトランジションにします。

悪い例
速すぎたり遅すぎたりするトランジションは避けましょう。

デュレーション

アニメーションのスタイルにかかわらず、不快に感じるほど速かったり、ユーザーを待たせるほど遅いトランジションは避けるべきです。デュレーションとイージングの正しい組み合わせは流れるように美しいトランジションを生み出します。以下の要点は各アニメーションに合ったデュレーションを調整する方法になります。

- 複雑さのレベル

シンプルなアニメーションは複雑なアニメーションよりも所要時間が短くなります。

シンプルなアニメーション

選択用ボタンは100ミリ秒(0.1秒)のデュレーションになっています。

ダイアログはフェードアニメーションで出入りしています。
フェードイン : 150ms(0.15秒)
フェードアウト : 75ms(0.075秒)

複雑なアニメーション

シェイプの変化が複雑になっており、200ms(0.2秒)とより長いデュレーションになっています。

詳細なアニメーションがあるアイコンは500ms(0.5秒)になっています。

- 閉じる動き

ユーザーを次のアクションへと注意を向けさせるために、要素を閉じたり畳んだりするトランジションはよりデュレーションを短くします。

ナビゲーションドロワーは250ms(0.25秒)開き、200ms(0.2秒)で閉じます。
ナビゲーションドロワー : 左から出てくるメニュー。単にドロワーとも言います。

このカードは300ms(0.3秒)で開いて、250ms(0.25秒)で閉じます。

- 領域

画面の小さな領域を動くトランジションは大きな領域を動くトランジションよりもデュレーションが短くなります。

小さな領域
アイコンや選択用ボタンのような、画面の小さな領域を動く要素は短いデュレーションになあります。

スイッチのアニメーションは100ms(0.1秒)のデュレーションになっています。

中間の領域
ボトムシートや展開するチップのような画面の大きな領域を動く要素は少しデュレーションが長くなります。

ボトムシート : スクリーンの下に固定されており、主に補足情報が格納されるシート。
チップ : 入力や属性、アクションなどが入る小型の要素。

ボトムシート
・開く速度 : 250ms(0.25秒)
・閉じる速度 : 200ms(0.2秒)

チップ
・開く速度 : 250ms(0.25秒)
・閉じる速度 : 200ms(0.2秒)

大きな領域
画面の大部分を動く要素は最も長いデュレーションになります。

カード
・開く速度 : 300ms(0.3秒)
・閉じる速度 : 250ms(0.25秒)

持続的なシート
・開く速度 : 300ms(0.3秒)
・閉じる速度 : 250ms(0.25秒)

イージング

イージングはアニメーションの変化割合を調整する方法です。イージングを使用すると一定の速度で動くよりも要素の変化を加速させたり減速させることが出来ます。

現実世界では、ものは即座に動き始めたり止まることはありません。加速と減速までに時間がかかります。イージングは摩擦のような自然の力によって影響されるように要素を動かします。

イージングのないトランジションは硬くて機械のような印象を与えます。

良い例
イージングを使用すると要素をまとめて加速させたり減速させたりすることができます。これら要素の加速度は同期しており、統一された印象を作り出します。

悪い例
でたらめな印象を与えてしまうので、減速すべき要素を加速させないようにしましょう。

- イージングの種類

イージングの種類はプラットフォームによって違った呼ばれ方をする場合があります。このガイドラインでは標準、加速、減速と呼称します。

- 標準的なイージング（イージーイーズ）

標準的なイージングは加速よりも減速に時間を与えることでアニメーションの終わりにさりげなく注意を向けさせることが出来ます。これがもっとも一般的なイージングの形となります。

要素の始まりと終わりに標準的なイージングを使用します。トランジションの終点を強調するために、素早く加速し徐々に減速させます。

このグラフはトランジション中の要素のイージングを示しています。Y軸は位置を、X軸は時間を示しています。

プラットフォーム別のプロトコル

Android
FastOutSlowInInterpolator

iOS
[[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f]

CSS
cubic-bezier(0.4, 0.0, 0.2, 1);

After Effects
Outgoing Easing: 40%, Incoming Easing: 80%

- 減速するイージング(イーズアウト)

入ってくる要素では減速するイージングを使いアニメーションさせます。ピークの速度(要素の動きの最も速いポイント)でトランジションをスタートさせ、最後に静止します。

このグラフはトランジションの終わり部分の要素のイージングを示しています。Y軸は位置を、X軸は時間を示しています。

プラットフォーム別のプロトコル

Android
LinearOutSlowInInterpolator

iOS
[[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f]

CSS
cubic-bezier(0.0, 0.0, 0.2, 1);

After Effects
Outgoing Easing: 0%, Incoming Easing: 80%

- 加速するイージング(イーズイン)

画面から出ていく要素では加速するイージングを使用します。静止状態からスタートし、終点に速度のピークが来ます。

このグラフはトランジションの始まり部分の要素のイージングを示しています。Y軸は位置を、X軸は時間を示してします。

プラットフォーム別のプロトコル

Android
FastOutLinearInInterpolator

iOS
[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]

CSS
cubic-bezier(0.4, 0.0, 1, 1);

After Effects
Outgoing Easing: 40%, Incoming Easing: 0%

以上が2章になります。ご拝読有難うございました。

次章 : マテリアルデザイン - コレオグラフィ