アニメーション/カーブエディタ

概要

アニメーションエディタは .anim.json クリップを作成するためのツールです。クリップは、Animator ルートエンティティの配下にあるエンティティのあらゆるトレイトフィールドを駆動できます。UIアンカーのオフセット、トランスフォームの値、カラーチャンネルなど、数値であれば何でも対象になります。左側の Properties リストでトラックを構築し、再生ヘッドの位置にキーフレームを打ち込んだうえで、Dopesheet でタイミングをざっくり整えたり、Curves ビューでイージングを緻密に形づくったりします。スクラブ中は、バインドされたエンティティが SceneView 上でライブにポーズ表示されるので、実際に見えている状態を確認しながら作業できます。

クリップを開く

クリップは常に Animator にバインドされた状態 で編集されるため、まずエンティティのバインドから始めます。

• 既存のクリップを開く: ヒエラルキーで Animator トレイトを持つエンティティを選択し、Assets パネルでその .anim.json をダブルクリックします。クリップはその Animator にバインドされた状態で開きます。
• 新しいクリップを作成する: Assets パネルでフォルダ（または Assets ヘッダー）を右クリックし、Create Animation を選びます。
• あとで開き直す: クリップを開き直すと、エディタはそのクリップを参照している Animator へ自動的に再バインドします。

補足

何もバインドされていない場合、エディタは黄色い 「No Animator bound」 バナーを表示します。トラックの内容は確認できますが、Animator がそのクリップを参照するまでは、ライブなエンティティに対してレコーディングすることはできません。

ツールバー

ツールバーには左から順に次の機能が並んでいます。

• Record（●） — アームすると、トレイトフィールドを編集した時点で再生ヘッド位置にキーが打たれます。
• トランスポート — 先頭へジャンプ、前のフレーム、再生/一時停止、次のフレーム、停止（先頭に戻る）。
• 現在フレーム欄と時間表示（例: 0.00s）。
• クリップ名。
• Samples — フレームレート（fps）。
• Len — クリップの長さ（秒）。
• Loop トグル。
• ◆+ — 全トラックに対して再生ヘッド位置へ一括でキーを追加します。
• Undo / Redo。
• 右端の自動保存ステータスインジケーター。

プロパティとトラック

左のカラムが Properties リストです。1トラックにつき1行が表示され、Trait.field（例: UIAnchor.left）とエンティティのパス（例: Back Button）がラベルとして並びます。各行にはプロパティ削除ボタンが付いています。

+ Add Property をクリックするとピッカーが開きます。Animator ルートのエンティティのサブツリーをたどってエンティティを選び、続いてアニメーション可能なフィールドを選択します。最初のキーフレームは、エンティティの現在値をもとに再生ヘッド位置へ自動的に打たれるため、トラックはエンティティがすでにある状態から始まります。

このカラムの下部にある Dopesheet | Curves タブトグルで、右側のビューを切り替えます。

キーフレームの追加

キーを打つ方法は3通りあります。

• Record をアームした状態で、インスペクター上または ギズモをドラッグしてトレイトを編集すると、再生ヘッド位置にキーが打たれます。
• ◆+（ショートカット K）を押すと、全トラックに一括でキーを打てます。
• Dopesheet の行、または Curves グラフの空きスペースをダブルクリックすると、その位置にキーを追加できます。

Dopesheet ビュー

Dopesheet はタイミングを扱うビューです。各トラックは、タイムラインのルーラー上に並んだダイヤ型キーフレームの1行として表示されます。値とは切り離して、物事がいつ起きるかを見て調整するのに使います。

Dopesheet はキーフレームのタイミングを表示します。アニメーション対象のプロパティごとに1行（ここでは「Back Button」の UIAnchor.left）が並び、タイムライン上にダイヤ型キーフレームが配置されます。

このビューでは次の操作ができます。

• ダイヤをドラッグ してそのキーのタイミングを変更する。
• マーキー（矩形選択）をドラッグ して複数のキーをまとめて選択する。
• ダイヤをダブルクリック して削除する。
• ルーラーをドラッグ して再生ヘッドをスクラブする。

Curves ビュー（カーブエディタ）

Curves ビューは、各数値トラックを「値 対 時間」のカーブとしてグラフ化し、イージングを緻密に形づくれるようにします。

Curves ビューは、各数値トラックを時間に対する値のカーブとしてグラフ化します。ドラッグできるドットがキーフレームで、青いベジェの in/out タンジェントハンドルが各キーを通過するイージングを形づくります。

キーフレームはドラッグ可能なドットです。キーの時間は隣接するキーの間にクランプされますが、値は自由に動かせます。各キーには青いベジェの in/out タンジェントハンドルが表示され、ハンドルをドラッグすると、そのキーを通過するカーブの傾き（と重み）を設定できます。上部のルーラーで再生ヘッドをスクラブでき、値軸は表示中のキーに合わせて自動的にフィットします。

キーを右クリック すると、タンジェントのプリセットが選べます。

• Auto（スムーズ）
• Linear
• Constant（ステップ状）
• Free（ブロークン）
• キーを削除

スクラブとプレビュー

再生ヘッドは、ルーラーをドラッグする、フレームを入力する、またはキーボードで操作することで移動できます。スクラブすると、バインドされたエンティティが SceneView 上でライブにポーズ表示されるため、作業しながらアニメーションを確認できます。

• , / . — 前 / 次のフレーム。
• Alt+, / Alt+. — 前 / 次のキーフレームへジャンプ。
• Space — 再生 / 一時停止。
• K — 全トラックにキーを打つ。
• Delete — 選択したキーを削除。

TIP

編集内容は（デバウンスされて）自動保存され、エディタ共通の undo スタックを使用します。そのためここでの Undo / Redo は、エディタの他の場所で使うのと同じ履歴になります。

プロパティをひととおりアニメーションさせる

1. Animator エンティティを選択してクリップを開く — ヒエラルキーで Animator トレイトを持つエンティティを選択します。Assets パネルでその .anim.json をダブルクリックすると、その Animator にバインドされた状態でクリップが開きます。あるいはフォルダを右クリックして Create Animation を選べば、新しいクリップを作成できます。黄色い「No Animator bound」バナーが出ていないことを確認してください。
2. プロパティを追加してトラックを作る — + Add Property をクリックし、Animator ルートのサブツリーをたどって対象エンティティを選び、続いてアニメーションさせたいフィールド（例: 「Back Button」の UIAnchor.left）を選びます。最初のキーフレームは、エンティティの現在値をもとに再生ヘッド位置へ自動的に打たれます。
3. Record をアームして数フレームに値を設定する — Record（●） をクリックします。再生ヘッドをフレームへ移動し（数値を入力する、ルーラーをドラッグする、または . を使う）、インスペクターで値を変更するか ギズモをドラッグすると、再生ヘッド位置にキーが打たれます。これをさらに数フレームで繰り返します。全トラックを一括でキャプチャするには ◆+（K）を押します。
4. Curves に切り替えてイージングを整える — 下部のトグルを Curves に切り替えます。キーフレームのドットをドラッグして値を微調整し、青い in/out タンジェントハンドルをドラッグしてキーを通過する傾きを設定します。手早く仕上げたいときは、キーを右クリックしてプリセット — Auto（スムーズ）、Linear、Constant（ステップ状）、Free（ブロークン） — を選びます。
5. スクラブしてプレビューする — Space で再生/一時停止、, / . でコマ送り、Alt+, / Alt+. でキー間をジャンプできます。スクラブに合わせて、バインドされたエンティティが SceneView 上でライブにポーズ表示されます。編集内容は作業の進行に合わせて自動保存されます。

次へ: パーティクルエディタ →