モーションデザインでよく使う！トランジション覚え書き
動画やWebのアニメーションでよく使われるカット転換（トランジション）についてピックアップしました。
「ここはふわっと切り替わります・・・」
「あの一瞬パッと明るくなるやつ何だっけ・・・」
そんな会話が少しスマートになりますよ。
1. ワイプ
直線でさっと拭き取るようにカットAからカットBへ切り替わる。
円形（カメラの絞り型）のワイプを用いたものを「アイリス」と呼ぶ。
2. フェードイン・フェードアウト
フェードインはカットが徐々に現れる。フェードアウトは徐々に消失する。
3. ディゾルブ
カットBが徐々に加算しながらカットAが徐々に減算される。変化の途中で輝度が重なるので鮮やかに発光したように見える。
4. クロスディゾルブ（クロスフェード）
カットAがフェードアウトしながらカットBがフェードインする。前述のディゾルブのような輝度の変化は得られない。
5. ブラックアウト
カットAが徐々に黒に、黒から徐々にカットBに切り替わる。
6. ホワイトアウト
カットAが徐々に白に、白から徐々にカットBに切り替わる。
7. ストロボ（ホワイトフラッシュ）
露出やグロー値が増減し、フラッシュのように一瞬光りながらカットAからカットBへ切り替わる。
8. ライトリーク
光漏れをしながらカットAからカットBへ切り替わる。フィルムルックな情緒的な効果が得られる。
9. スライド
カットAの上にカットBがスライドしながら切り替わる。
10. 押し出し
カットAをカットBが押し出すようにスライドして切り替わる。
---
おまけ：イージング
最後に「イージング」についてご紹介します。トランジションとセットでもよく使われる効果で、動きの速度に緩急をつけることで心地良いニュアンスを得ることができます。
イーズアウト
始めは速く動き出し、徐々にゆっくりに。
イーズイン
始めはゆっくり動き出し、徐々に速く。
物理運動をよく観察して、イーズアウト・イーズインを選択しましょう。基本的には徐々に運動が減衰する「イーズアウト」を用いると自然でしょう。
---
イージングについては、ritarさんのこちらの記事で分かりやすく取り上げられていますので、合わせてご覧ください。
Webで使うCSSのイージングでは、強弱の弱い順からSine・Quad・Cubic・Quart・Quint・Expoが指定できます。ICS MEDIAさんのサイトに詳しい解説がありますので、ご参考までに。
---
最後までご覧頂きありがとうございました。