アニメーションのイージング：イーズイン、イーズアウト、カーブ
イージングとは、アニメーションの値がキーフレーム間で一定の速度で動くのではなく、加速したり減速したりする方法です。イーズは、重さのあるオブジェクトが実際に動くように、動きを緩やかに開始させたり、緩やかに停止させたり、あるいはその両方を行わせます。これは2つのキー間の補間カーブによって設定されます。
簡潔な答え
イージングはキーフレーム間の加速を制御します。リニアな動きは一定速度で急停止しますが、イーズされた動きは1つのキーから加速し、次のキーに向かって減速します。ツールによって「イーズイン」の意味が異なるため、「ゆっくり開始」（加速）または「ゆっくり終了」（減速）と表現するのが最も明確です。各キーのベジェハンドルはイーズを正確に形作り、キーの値を越えて引かれたハンドルはオーバーシュートを生み出します。
なぜ一定速度が不自然に見えるのか
実際のオブジェクトには質量があります。車は動き出した瞬間に巡航速度に達するわけではなく、ドアもフレームでぴたりと止まるわけではありません。全速力で開始・停止する動きは、観客が理由を説明できなくても、機械的、無重力、またはコンピューター生成されたものとして認識されます。
Disneyのアニメーターは、この原則を「スローイン・スローアウト」と名付けました — 『The Illusion of Life』で示されたアニメーションの12原則の1つです。動きの開始と終了付近に多くの描画を、中央には少ない描画を配置することで、加速と減速が生じます。3Dソフトウェアでは、同じ効果が追加の描画ではなく、キー間のカーブから生まれます。
イーズインとイーズアウトは逆の意味を持つ
これは最も一般的な混乱の原因であり、あなたのせいではありません。CSSやRobert Pennerの広くコピーされたイージング関数では、イーズインは動きがゆっくり始まり加速することを意味し、イーズアウトは速く始まり停止に向かって減速することを意味します。カーブは2つのキー間の動き全体に属します。
After Effectsや多くのキーベースのツールでは、イージングはキーに属します。キーへのイーズインは動きがキーに到達する際に減速することを意味し、キーからのイーズアウトは動きがキーを離れる際にゆっくりと開始することを意味します。したがって、最後のキーに対するAfter Effectsのイーズインと、動きに対するCSSのイーズアウトは、逆の名前で同じ減速を生み出します。動きを「ゆっくり開始」「ゆっくり終了」「両端でゆっくり」と表現することで、曖昧さを避けることができます。
補間タイプとベジェハンドル
リニア補間はキー間に直線を描き、一定速度で各キーで急激な変化をもたらします。コンスタント、ステップ、またはホールド補間は、次のキーまで値を保持し、その後ジャンプします。これはブロッキング、瞬き、およびスナップすべきものに役立ちます。ベジェまたはスプライン補間は、キーを通して滑らかなカーブを描き、イージングが適用される場所です。
ベジェキーには2つのハンドルがあり、1つはキーに到達するカーブを制御し、もう1つはキーから離れるカーブを制御します。フラットなハンドルはキーでの速度がゼロであることを意味し、イーズとなります。ハンドルが長いほど、その減速が動きのより多くの部分で維持されます。ハンドルが一直線上にある場合、キーを滑らかに通過します。ハンドルが分離している場合、バウンスのように急激な方向転換が生じます。ハンドルを引いてカーブがキーの値をオーバーシュートするようにすると、動きはターゲットを越えてから戻って落ち着きます。
標準的なイージングファミリー
2000年代初頭に公開されたPennerのイージング方程式は、sine、quad、cubic、quart、quint、expo、circといった名前付きカーブの共通語彙となりました。それぞれにin、out、in-outの形式があり、ほとんど存在しない（sine）から激しい（expo）まであります。Backは落ち着く前にターゲットをオーバーシュートします。ほとんどのモーションツールやCSSライブラリは、このセットのいずれかのバージョンを出荷しており、通常は三次ベジェカーブとして近似されます。
Elasticとbounceは例外です。これらは1つの動きの中で数回振動しますが、単一の三次ベジェではこれを実現できません。そのため、ツールは複数のキーから構築するか、プロシージャルに生成します。
どのイーズを使うべきか
開始と停止のあるほとんどの動き（カメラのプッシュ、オブジェクトが所定の位置にスライドする、首を回すなど）には、両端をイーズします。到着して落ち着くものにはゆっくりとした終了を、発射するものにはゆっくりとした開始を使用します。一定であるべき動き（回転するファン、コンベア、ループサイクルの途中など）や、動きがまっすぐ通過すべきキーにはリニアを維持します。スナップ、瞬き、ブロッキングにはホールドを使用します。
Mixos Studioでのイージング
キーを選択すると、タイムラインヘッダーにLinear、Ease in、Ease out、Ease、Holdが表示されます。これらはキーベースの慣例に従います。Ease inはキーに到達する動きを減速させ、Ease outはキーから離れる動きを減速させ、Easeはその両方を行います — After EffectsのEasy Easeです。タイムラインがフォーカスされている状態で、F9でEase、⇧F9でEase in、⌘⇧F9でEase outが適用されます。
「カーブ…」は、SineからBackまでのPennerのファミリーを開き、名前だけでなく感覚でも検索でき、保存したカーブも表示されます。カーブモードでは、トラックがベジェハンドル付きのカーブとして描画され、直接ドラッグしてオーバーシュートを含めることができます。Elasticとbounceは意図的にカーブリストにはありません。「+ Motion」の下にあるスプリングおよびバウンスジェネレーターが、代わりにその種の動きを生成します。
よくある質問
イーズインとイーズアウトは何を意味しますか？
どちらも速度の段階的な変化を表しますが、ツールによって使い方が逆になります。CSSやPennerの関数では、イーズインはゆっくりとした開始、イーズアウトはゆっくりとした終了を意味します。After Effectsなどのキーベースのツールでは、キーへのイージングは動きが到達する際に減速させ、キーからのイージングは動きが離れる際に減速させます。
リニア補間とベジェ補間の違いは何ですか？
リニア補間は値を一定の速度で移動させ、各キーで急激に変化します。ベジェ補間はキーを滑らかな曲線で結び、動きの加速と減速を制御するハンドルがあり、これがイージングを可能にします。
ホールドキーとは何ですか？
コンスタント（ステップ）補間を持つキー：値は次のキーまでその位置に留まり、その後ジャンプします。これはブロッキング、瞬き、カット、そして移動ではなくスナップすべきあらゆるものに使用されます。
アニメーションをオーバーシュートさせるにはどうすればよいですか？
ターゲットを越えた位置にキーを追加し、その後に落ち着くキーを追加するか、ベジェハンドルを引いてカーブがキーの値を越えてから戻るようにします。バックスタイルのイージングカーブは、プリセットと同じ効果をもたらします。
私のアニメーションがロボットのように見えるのはなぜですか？
通常、リニア（一定速度で、各キーで急な開始と停止）だからです。開始と停止をイージングし、動きの一部を数フレームずらしてすべてが同時に動かないようにすることで、ほとんどが修正されます。
動きにキーを設定し、同じ2つのキーでリニア、イーズ、バックを試してみてください — 違いは説明するよりも見る方が簡単です。