はじめに

この記事は KLab Creative Advent Calendar 2018 の 8日目の記事になります。

こんにちは。CGデザイナーのkiyoonです。

映像制作会社での経験を経て、現在はUnityやMaya,AfterEffectsを使用し、エフェクトや演出作成を行う演出チームに所属しています。

今回はエフェクトを作る上での基礎となる気持ちの良いアニメーションについてご紹介します。

気持ちの良いアニメーションとは？

アニメーションを付ける時「もっと緩急が欲しい！」とか「動きが気持ち良くない！」と感じたことはありませんか？

自然界に存在する物の動きは、機械のように一定の速度で動くようなものでなければ重力や摩擦によって加速したり減速したりしています。

そのため、例えば文字を出すアニメーションを作る場合、その文字が一定の速度で画面に出てくると機械的で、それを見た人は固い動きに違和感を覚えます。

しかし、このアニメーションに加減速（イージング）をつけることで機械的な動きから自然な動きになり、やり方次第でダイナミックな表現にすることもできるようにもなります。また、こちらの方が見ていて気持ちの良いアニメーションになっていると言えます。

アニメーションを付ける機能を備えたツールの一つとしてAfterEffectsが有りますが、開始点と終了点を設定するキーフレームを使ったアニメーションの補間方法には大きく分けて①一定の速度で動くもの②速度変化があるものの２種類があります。一定の速度で動くものには「リニア補間」が使われ、速度変化があるものには「スプライン補間」や「ベジェ補間」が使われます。

具体的に何をするのか？

加減速（イージング）と言われても分かりにくいかもしれませんが、基本は「イーズイン」と「イーズアウト」の２種類が多く使われます。

イーズイン

緩やかに動き始めて徐々に加速をする動きをします。

イーズアウト

高速で動き出し後半にかけて緩やかになる動きをします。

この2つが基本となり、組み合わせたり強さを調整したりすることで理想の動きにして行きます。

AfterEffectsやUnityといったツールでは加減速の数値を手で入力しなくても、グラフを使って直感的に操作することができます。

AfterEffects,Unityでの作成方法

AfterEffects

AfterEffectsはアニメーションがとても付けやすく、細かい調整はグラフエディターで調整をしていきます。ベジェ曲線を使ったカーブを使うので、キーフレームが少なくてもダイナミックな動きを付ける事が可能です。

キーフレームを選択して右クリックメニューを表示し、「キーフレーム補助 > イージーイーズ（F9）」を選択することでイージングが可能です。

デフォルトではグラフエディタ上で位置のカーブを編集できませんが、トランスフォーム内の位置を右クリックし「次元に分割」をすることでX,Yそれぞれ個別に操作が可能となります。

Unity

Unityのアニメーションも非常に使いやすく、キーフレームを打った後アニメーションウィンドウの「Curve」タブ内での操作が可能です。

Unityの場合、デフォルトでイージングがされますが、意図しない動きになるかもしれないので都度確認をします。

Unity2018.1からアニメーションカーブに「Weighted Tangent」というAfterEffectsで例えるとベジェ曲線のようなものが追加されたので、少ないキーフレームでもダイナミックな動きを付けることが可能になりました。それ以前のバージョンの場合、キーフレームを追加して理想のカーブを作ります。

カーブを丁寧に付けて行くことが大切！

こだわったアニメーションを付けていくとキーフレームの数がどんどん増えていきます。当然カーブも複雑になって行きますが、このカーブを丁寧に作っていくことで違和感の無い気持ちの良いアニメーションを作ることができます。

アニメーションは主に「位置」「回転」「スケール」のトランスフォームと言われる3要素を、演出に合わせて設定していきます。

これらの要素以外にもX,Yなどの方向もあり煩雑になりがちですが、要素ごとに分解して丁寧に付けていくことが大切です。

まとめ

映像やエフェクトを作る上で基本的なことではありますが、アニメーションの緩急は非常に重要です。

ちょっとしたイージングを入れるだけでも品質が上がり、グラフ上のカーブを丁寧に作っていくことで、更に品質が高いものを作ることができます。

緩急の組み合わせは沢山あり、まずは引き出しを増やすことが大切なので優れた作品を研究し、実際に作ってみることが重要です。