【TouchDesigner】キーフレームを使ったアニメーション──AnimationCOMPを使う


# はじめに
TouchDesignerを主にビジュアライズで使用する場合、一般的なアニメーションツール同様に緻密なイージングで値をコントロールする必要があります。
そんなときに使用する便利なオペレーターがAnimationCOMPです。
いろいろな使い方があるんですが、ここでは自分なりの使い方をまとめて見ようと思います。

## アニメーションカーブの作り方

#### 出してみる
COMPなのでCOMPタブの中にあります。
オペレーターのパラメーターペインの一番下にある”Edit”というボタンを押すとAnimationSettingsというのが出てきます。
突然画面が上下に分割されます。

![cap1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/602b61f1-2e95-78c4-ad02-7ba42df48142.gif)


#### 設定を変える
一旦OPのマネージャに戻り、ちょっと設定を変更します。

■Animationタブ
**Play Mode　:　Locked to Timeline　→　Output Full Range**

　”Locked to Timeline”は全体のタイムラインに沿ってAnimationCOMPを動かすモードです。
　映像がしっかりタイムライン管理されているときにはとても便利ですが、イベント的に数値を扱う場合には不向きです。
　”Output Full Range”はアニメーションカーブをそのまま扱うモードです。

■Rangeタブ
**Type　:　Timeline　→　Custom**
**使用する単位　:　Frames　→　Samples**

　”Type”はアニメーションカーブのレンジを全体のタイムラインと同じにするか自由に決めるか選択する項目です。
　”Custom”を選びます。
　単位も時間と関係なく扱いやすい”Samples”にします。
　サンプル数はとりあえず0-600のままでいいです。


![AnimationCOMP_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/1926085c-0990-2953-8111-5a8cf201c173.gif)


#### Animation Settingsをいじる

さっそくアニメーションカーブを描きます。
どうやって使うのか簡単に説明します。

---
■チャンネル名を決めて追加する
　”Names”に名前を入れて”Add Channels”を押すと値が0のチャンネルが追加されます。
![named_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/a2e5ea86-79fd-d170-80d7-0815eb8ac726.gif)

----
■フレームにキーを打つ
　”Alt + 左クリック”でキーが打を打ちます。
　接線をグリグリすると曲線の形状を変えられます。
![alt.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/78d0ca65-b41c-2488-d06d-40bf060e48b2.gif)


---
■グラフの大きさや位置を変更する
　マウス中ボタンを押しながら上下左右にドラッグすると拡縮
　左ボタンを押しながらドラッグすると位置を移動できます。
　ちなみに左ボタンを押すとキーフレームの矩形選択ができます。
![move.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/997c3a12-6b17-bdc5-5d3d-612f668034a2.gif)

---
■値を数値入力する
　”Channel Editor”でキーの位置、値、接線の角度を数値入力できます。

![param.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/2865ff57-b45f-44b8-529e-33f14c5d2360.gif)


---
■スナップを使う
　”Snap”のXYのボタンをハイライトさせると入力した数値でキーが量子化されます。

![Snap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/409093a7-d3fb-23d2-1e02-6032d4c353f4.gif)


---
■接線の結合を切る
　接線を選択して"t"を押すと接線を分割できます。

![T_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/23fd4689-c8b6-7378-27ec-3db5f94590e2.gif)


---
■関数曲線を変える
 ”Function”のドロップダウンメニューを変更して適切な曲線を選びます。初期はCubicになっています。

![Function.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/269de9c8-e683-2e86-bf78-57edb681afde.gif)

:::note info
注意
カーブの形状のドロップダウンを変更したのにカーブが変更されず困ったこと、ありませんか？ちょっとしたコツがありますので参考にしてみてください。

こんなかんじに変更したい箇所をクリックして選択します。
選択された箇所は表示が太線になります。
![スクリーンショット 2025-06-08 180148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/48805218-01f0-4c5b-acd7-f045561661ef.png)
その状態でドロップダウンメニューを変更すると選択された箇所のカーブが変更されます。
この手のツールはキーフレームの点を選択して変更するものがほとんどなのでカーブを選択するというのは珍しく案外気づきにくいポイントです。
![レコーディング-2025-06222-08-181139.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/47484129-7faa-4e3e-94ab-4725f7b368a4.gif)
:::



　
## アニメーションカーブの使い方
こんなふうなカーブを作ってみました。
これを使ってみます。
![wave.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/4774fc33-394b-af00-c0e6-080fa186e6ce.png)


　
　
そしてこんなふうに組みました。
**lookupCHOP**の下の入力に**animationCOMP**をつなぎます。
上の入力には0-1の値をつなぎます。**filterCHOP**(Box/1sec.)をはさんでトグルボタンを押すと0から1へリニアに変化するようにしてあります。
その結果をgeo1COMPのポジションXで参照しています。

![lookup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/59993a2f-e8d8-7382-fa70-79cfadd6ff85.png)
　
　


ボタンを押すとボックスが左右(X方向)に動いているのがわかります。
![boxMove.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/29a99996-9a16-0988-c926-6d237c83c4df.gif)
　
　
試しにtrailCHOPをつないでみました。
animation1COMPで作ったカーブを1秒間で行ききって、そして1秒間で戻っているのがわかります。
![trail.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/31c05c2c-4736-141d-45d5-597848f58bd2.gif)

といった具合にトリガー噛ますと緻密な動きを作れて便利です。


　

---
このようにanimationCOMPの入力にフレーム数を入力してやると同じようなことができますが、一旦フルレンジのカーブにしておいたほうがなにかと扱いやすいです。

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/93ea2601-5edd-1814-3c70-d7fe13351519.gif)

　
　
例えばこんなふうにただのカーブとして使うこともできます。汎用性が高いです。

![cb.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/a9464e7b-0606-d571-da27-5b1a9fbc5dce.gif)





　
　

この方法だとひとつのanimationCOMPにまとめて管理できます。
必要なカーブをセレクトで取り出してから長さやサンプル数を変更します。

![select.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/58bac349-ba25-935d-f5f1-df16b5a2f533.png)
　　
　
　

トリガーのオフセット、緻密なタイミングのコントロール、変則的なアニメーションなど使い方はさまざまなので覚えておくと便利です。
![flash.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/358b66a8-fcb6-e271-4f6c-3548f95e8fc9.gif)