グラフエディターの利用

グラフエディタとは

グラフエディタとはアニメーションを作成した後、キーフレーム間の動きを設定できる機能のことで、スピードに緩急をつけたりすることができます。

イージング（強さ準拠）：円形

やりたいこと

それではグラフエディターを使ってアニメーションにメリハリをつけていきましょう！

事前に準備すること

まず、キーフレームを１・20・40・60フレームに設定しY軸上に動かしたこのようなアニメーションを用意します。

操作手順

１. エディタータイプを変更する

タイムラインウィンドウの左上の時計のアイコンをクリックし、 グラフエディタをクリックします。

２. キーフレームを選択する

キーフレームが見えない場合は、グラフエディタ内でマウスホイールをスクロールすると、エディタが縮小して画面全体が表示されてキーフレームも表示されます。

赤丸で囲ったところがキーフレームになります。

一つのキーフレームをクリックしたら、キーボードの「Ctrl」キーを押しながら、もう一つのキーフレームをクリックすると、２つのキーフレームが選択されます。

３. キーフレーム補間を設定する

キーフレームを選択したまま、グラフエディタ内でキーボードの「T」を押し、 イージングの「円形」をクリックします。

キーフレームを繋ぐ曲線が、変化したことを確認します。

４. 実際に動かして確認してみ

こちらがグラフエディタ設定後のアニメーションになります。

グラフエディタ設定後はメリハリのあるアニメーションになっている事が確認できます。

ダイナミックエフェクト：バウンス

続いてダイナミックエフェクトを使用してオブジェクトをバウンドさせてみます。

操作手順

まず、同じようにエディタータイプを変更し、キーフレームを選択します。

１. キーフレーム補間を設定する

そのままキーボードの「T」を押し、 ダイナミックエフェクトの「バウンス」をクリックします。

キーフレームを繋ぐ曲線が、変化したことを確認します。

２. 実際に動かして確認してみる

こちらがグラフエディタ設定後のアニメーションになり、オブジェクトがバウンドしている事が確認できます。

補間：一定

続いてキーフレームの補完を一定にしてオブジェクトを瞬時に移動させるアニメーションを作成していきます。

操作手順

まず、同じようにエディタータイプを変更し、キーフレームを選択します。

１. キーフレーム補間を設定する

そのままキーボードの「T」を押し、 補間の「一定」をクリックします。

キーフレームを繋ぐ曲線が、変化したことを確認します。

２. 実際に動かして確認してみる

こちらがグラフエディタ設定後のアニメーションになり、オブジェクトが瞬時に移動している事が確認できます。

カーブの編集：「S」キー

やりたいこと

続いてグラフエディターのカーブを編集してアニメーションの動きを調節する方法を説明します。

操作手順

まず、エディタータイプを変更します。

１. キーフレームを選択する

キーフレームを選択します。

３. F-カーブを編集する

赤丸で囲った部分がF-カーブになります。

キーフレームを選択した状態でキーボードの「S」キーを押すと、Fカーブの長さを変更する事ができ、曲線の形状を変更できます。

キーボードの「R」キーを押すとF-カーブの角度を変更できます。
キーボードの「G」キーを押すとキーフレームの移動ができます。

もう一つのF-カーブも同様に選択し、曲線をこのような形に編集します。

４. 実際に動かして確認してみる

こちらがFカーブ編集後のアニメーションになり、このように編集前よりも緩やかな動きになります。

全部の動き

最後に全120フレームで全ての動きを設定してみます。

１. 20フレームにイージング（強さ準拠）の円形を設定します。
２. 40フレームにダイナミックエフェクトのバウンドを設定します。
３. 80フレームに補間の一定を設定します。
４. 100フレームはカーブの編集を行います。
また、1フレームと120フレームは開始と終了になります。

全ての設定を組み合わせると、このようなアニメーションになります。

以上でグラフエディタの利用についての解説を終わります！