イージングとは

たとえば、停止しているオブジェクトが移動を始める場合、最初から一定速度で動かすのではなく、停止状態から徐々に加速させます。停止するときは、一定速度から徐々に減速して速度を0にします。

イージングは時間補間

イージングの操作が調整するのは、時間に対する値や速度の変化です。

オブジェクトの位置をアニメーションさせる場合でも、イージングによって変わるのは移動経路ではなく、その経路上を進む速度です。直線上を移動する場合でも、曲線上を移動する場合でもイージングを設定できます。

位置、拡大・縮小、回転、不透明度、エフェクトの数値など、時間によって変化するさまざまなプロパティに適用できます。

リニア補間との違い

リニアな時間補間では、キーフレーム間の値が一定の割合で変化します。

位置のアニメーションなら一定速度で移動します。

イージングでは、その変化率を時間の途中で変えます。

リニア
一定の割合で変化する

イージング
加速や減速を伴って変化する

イージングは時間補間であり、画面上の移動経路を決める空間補間とは別のものです。

イーズインとイーズアウト

一般的なアニメーション用語では、次の意味で使われます。

イーズイン（Ease In）
変化の開始をゆっくりさせ、徐々に速くします。

イーズアウト（Ease Out）
速く変化を始め、終了に近づくにつれてゆっくりにします。

イーズイン・アウト（Ease In Out）
ゆっくり始まり、途中で速くなり、終了に近づくと再びゆっくりになります。

ここでの「イン」「アウト」は、1つのアニメーション区間の開始側と終了側を表しています。

キーフレームを基準にしたEase In/Ease Out

Premiere ProやAfter Effectsのデスクトップ版では、Ease In／Ease Outを、選択したキーフレームの前後を基準にした名称として使っています。

Ease In
そのキーフレームへ向かう側の変化を緩やかにします。

Ease Out
そのキーフレームから離れる側の変化を緩やかにします。

たとえば、

A ───────── B

という2つのキーフレームがあり、Aから動き始めてBで停止させる場合、Adobeのキーフレーム操作では、

• A側にEase Out

• B側にEase In

を使用します。

この呼び方では、「In」「Out」はアニメーション区間全体の開始・終了ではなく、選択したキーフレームに対する前後を表しています。

AdobeのEase I / Ease Outは逆の場合も

Ease In/Ease Outは、ソフトや機能によって名称の基準が異なります。

一般的なタイミング関数では、Ease Inは「開始をゆっくり」、Ease Outは「終了をゆっくり」という意味で使われます。

一方、Premiere ProやAfter Effectsのキーフレーム補間では、個々のキーフレームを基準にIn／Outを区別します。操作するときは、アニメーション区間を基準にした名称なのか、キーフレームを基準にした名称なのかを確認する必要があります。

ベジェ補間との関係

イージングによる時間的な変化は、ベジェ曲線を使って調整できます。

値グラフや速度グラフ上のベジェハンドルを操作することで、加速や減速の強さ、変化するタイミングなどを細かく設定できます。

イージングは時間的な変化の付け方を表し、ベジェ補間はその変化を曲線として制御する方法のひとつです。