Tutorial 5.3

アニメーションカーブ (Pro版のみ)

はじめに

このチュートリアルではタイムラインでのグラフモードについて解説します。グラフモードを使うとアニメーション設定した値をグラフ表示することができます。このオプションで物体の加速や角度の変化などを視覚的に見ることができます。

サンプルファイルから開始

このチュートリアルを始める前に、アートワークを含んだプロジェクトを読み込んでください。それは"Tutorials/5 - Animation"フォルダに"Tutorial 5.3"と名づけられて保存されています。

ここからチュートリアルを開始する

ここではSkeletonレイヤーに注目したいので、それが選択されていることを確認してください。Skeletonは最初からアニメーションが設定されています。どのような動きをするか再生してみると良いでしょう。ここで不思議に思われるかも知れませんので補足しますが、アニメーションがつけられているのは一番下のボーンのみです。他のボーンはコンストレインツによって連動するよう予め設定されています。

モーションカーブ

ボーンの選択

巻き戻しボタンをクリックして、アニメーションをフレーム0に巻き戻してください。続いてボーンの選択ツールで一番下のボーンを選択してください。


一番下のボーンを選択

タイムラインウィンドウの"グラフモード"をクリックして、ポップアップから"グラフモード有効"をチェックしてください。次に"選択ボーンの角度"チャンネルのアイコンをダブルクリックしてください(これはタイムライン左上の最初のチャンネルです)。ちなみに最初のクリックはチャンネルの表示を有効にし、2度目のクリックでチャンネルの編集を有効にする働きをします。

グラフを大きく見たいので、グラフが有効になっている他のチャンネル をクリックして表示を消します。最後にキーボードのEndキーを押してください。グラフがタイムライン一杯に拡大されて、以下のようになります。

グラフモード

グラフには三つのキーフレームが表示されています。 これらのキーフレームは標準的なタイムラインの水平方向(時間軸)とは別に、垂直方向(値)に表示されます。 この例では、"選択ボーンの角度"チャンネルの値がグラフ曲線として表示されます。 この曲線を見ることで、最初の一秒(フレーム1から24まで)の間で、ボーンの角度が約1.57から約1.05まで変化することが分かります。 そして残りの0.5秒で元の角度に復帰しています。

【メモ】タイムラインの角度は表示スケールが他の値に近くなるように、デフォルトではラジアンで表現しています。 しかし角度を「°」で表示したいなら、編集メニューから初期設定コマンドを選択し、オプションタブの"タイムライン上の角度を「°」で表示する"をチェックすることで変更可能です。

それでは、グラフを修正してボーンの動きを変更してみましょう。 最初に現在時間をフレーム48に変更して、ボーンメニューから"ボーンをリセット"を選択してください。 作業しやすくするために、 Page Down キーを使って、グラフに余白を空けてください。 次に、下図のようにフレーム33のキーフレームをドラッグして、上へ移動してください。 もし、<alt> キーを押しながらドラッグすると、キーフレームの移動方向を上下方向に制限することができます。 逆に、<ctrl> キーを使用した場合は、左右方向に制限されます。

キーフレームの移動

次にグラフ上に直接キーフレームを追加します。 フレーム37のグラフの周辺を右クリックします。 表示されたポップアップメニューから"キーフレーム追加"を選択してください。 新しいキーフレームが追加されますので、それを下図に示した例のように移動してください。

新しいキーフレームの追加

さらに三個のキーフレームを追加しましょう。 フレーム40、43、46に対して、キーフレームを追加してください。 なお、キーフレームを追加するとき、現在時間を望むフレームに移動する必要はなく、追加したい位置で右クリックするだけで構いません。 もし、正確な位置にキーフレームを追加できなくても心配する必要はありません。 キーフレームを追加してから、望む位置に移動すれば良いのです。 では、下図のようにグラフ曲線を編集してください。

グラフの最終結果

この、うろうろする曲線は弾力のある物体が、やがて減衰する様を表現するものです。 もちろん、こういった動きをグラフを使わずに、タイムラインと"ボーンの回転"ツールだけでアニメーション化することは可能ですが、それとは別のやり方もあるということを理解してください。 それでは、最後にこの動きがどのように見えるかアニメーションを再生してみてください。