イージング

イージングは、アニメーションの重要な状態の間で、進み方を変えます。2つの物体が同時に出発し、同じ距離を進み、同時に到着しても、途中の速度変化が違えば印象は変わります。

位置だけでなく、大きさ、回転、不透明度にも適用できます。Adobeのイージング解説では、アニメーション内の変化率を調整する方法として説明されています。

主なイージングのパターン

• リニア：同じ時間で同じ量だけ変化します。一定の速度を保ちたい動きに向いています。
• イーズイン：ゆっくり始まり、加速します。画面から出ていく要素に勢いをつける場合などに使えます。
• イーズアウト：速めに始まり、最後に減速します。カードやラベルを、読んでほしい位置へ落ち着かせる場合などに適しています。
• イーズインアウト：ゆっくり始まり、加速し、最後に再び減速します。動き始めと終わりの両方が見えるときに使えます。

これらの名称は大まかな傾向を表します。同じ名前でも、曲線によって柔らかくも急にも感じられます。例では違いを見せるために単純な曲線を使っており、ソフトウェアの標準設定を比較しているわけではありません。

モーショングラフィックスでの選び方

1. 動きで何を伝えるか決めます。登場、退場、静止位置への収まり、一定速度の移動のどれでしょうか。
2. 位置と時間を固定します。同じ条件で曲線を比べることで、速度の変化を判断できます。
3. 動き全体を確認します。遅い立ち上がりは重要な情報を遅らせ、長すぎる減速は短い切り替えを重く感じさせます。
4. 周囲の要素も確認します。選択されたカードが収まる間、ほかのカードが場所を空けることもあります。曲線が違っても、動きが連動して見えるようにします。

iArtでは、単に「滑らかに」と頼むより、素早く入ってゆっくり止まる、加速せず一定速度で進む、といった振る舞いを説明します。所要時間も明示してください。カードが連動する実例は3Dカルーセルアニメーションの作り方をご覧ください。

キーフレーム、補間、ばねとの違い

キーフレームは、開始位置と終了位置などの重要な状態を定めます。補間は中間の状態を作り、イージングはそこへの進み方を調整します。ばねは剛性や減衰などで応答をモデル化し、目標を通り過ぎてから落ち着く場合があります。イージングに跳ね返りは必須ではなく、どんな動きにも有効というわけではありません。

関連用語：JavaScriptアニメーション、キネティックタイポグラフィ。文字の実例はテキストアニメーションの作り方をご覧ください。