今回は Animation COMP という TouchDesigner でキーフレームアニメーションを作るツール使い方を勉強します！簡単なアニメーションを作ってみましょう。 実はちょっとバグがある機能な印象なのですが、便利な側面もあるので使ってみましょう！
サンプルファイル
chimanaco/takara-univ-media-programming-2022
05が本日のディレクトリです。
Animation COMP
OP Create Dialog から COMP タブを選んで Animation を選択、network editor にドラッグ&ドロップして追加します。
parameter window の Animation タブの Edit Animation をクリックすると、キーフレームのアニメーションエディタが開きます。
Play Mode が Locked to Timeline になっていることを確認してください。この設定だと TouchDesigner のタイムラインと同期します。
アニメーションエディターの基本操作としては、以下のようなものがあります。
- キーフレームではないところを
LMBドラッグで範囲を移動。 CMB+ 上下左右ドラッグで範囲の拡大縮小。RMBドラッグで複数のキーフレームを選択してボックスセレクト。
Animation Settings の Names でアニメーションのチャンネル名を指定し、Add Channels でアニメーションエディタにチャンネルを追加することができます。
デフォルトの t[xyz] というのは便利な書き方で、tx, ty, tz の3つのチャンネルを追加することができます。この書き方は TouchDesigner の他の箇所でも使うことができるので是非覚えておいてください。例えば CHOP でチャンネルを作る際などによく使います。
チャンネルを追加すると、左下に指定したチャンネル名が追加されています。COMP の中にもチャンネルが確認できます。
Alt + LMB でキーフレームを追加できます。またはアニメーションエディタ上で RMB クリック → 一番上の Add Keyframe でも同じです。
キーフレームを LMB クリックで選択することができ、ドラッグで位置を動かすことができます。
キーフレームを選択した状態で F にフレーム数、V に値を指定することができます。値を入れて Enter を押すと決定されます。
Snap X と Y は選択したキーフレームの移動の単位を指定できます。例えば X が4の時にキーフレームをドラッグすると、4の倍数の数値になりますし、Y が2の時は Y は2の倍数になります。
キーフレームを選択してハンドルを動かすとアニメーションの傾きを変更することができます。
練習： Animation COMP で Circle を動かす
AnimationCOMP の後に nullCHOP をつなぎます。CircleTOP をネットワークに追加し、アニメーションエディタから出力される値を Center から参照して Circle を動かしてみてください！
- 値は -0.5 から 0.5 の間にする
- Circle TOP の Radius を小さくする（e.g. 0.1）
- どうやったら緩急がつけられるか考えてみる
ループするシンプルなモーショングラフィックの例
みなさんに取り組んで頂く前にサンプルとして、この After Effects のチュートリアルのような動きを作ってみます。
はじめに、アニメーションの尺を短くします。Range タブの Custom を選択、Start を 0、End を 299 に指定します。単位は I（Samples）にする。
まずは円弧がだんだんと長くなる動きを作ります。cend というチャンネル名を作り、150フレーム目で1となって、その後最終300フレームまで1を保つようにします。アニメーションは0から1の範囲で作り、それを MathCHOP で Range を 0 から 359 にします。
この値を Arc Angles の endarcangle から参照すると、1フレーム目から150フレーム目まで円弧が長くなっていくアニメーションができます。
まず円の終点を動かしましたが、今度は終点を固定して始点を動かします。cbegin というチャンネル名を作り、1から150フレーム目までは1、その後最終300フレームで0になる。アニメーションは0から1の範囲で作り、それを MathCHOP で Range を 359 から 0 にします。
この値を Arc Angles の beginarcangle から参照すると、151フレーム目から300フレーム目まで円弧が長くなっていくアニメーションができます。これで追いついた後、もう一度アニメーションするパターンができました。
最後に Circle を回転させます。1フレーム目から300フレーム目までリニアに360度変化するような値を入れます。これで回転しながら円弧を描いていくサンプルができました。
少しずつずらして配置する
TOP の出力を遅らせるのに Cache TOPを使用します。今回は Cache Sizeを100、Index を -40 とすると 40 こ前に保存された状態を表示します。
さらに TransformTOP で縮小して色を変えます。これを繰り返していきます。
本日の課題： ループアニメーションを作る
Animation Editor を使って様々なパラメーターを動かしてみてください。プロジェクトフォルダごと Teams に提出してください。
- ループさせるのに始点と終点は同じ値にする
- 位置、回転、円弧だけでなく何が変えられるか考えてみる。