TouchDesignerでベジエカーブを使ったイージングアニメーションをやってみたいと思います。
エディタ画面
エディタ画面はこんな感じで、オペレーターはそれほど多くありません。
ベジエ曲線を描く
Line SOP
ベースのオブジェクトは「Line SOP」を使います。
Line SOPはデフォルトでは[0, 0, 0]と[1, 0, 0]の2点のポイントを繋ぐラインになっています。
このLine SOPに中点を加えて、その中点を原点にアニメーションさせようと思うので、各パラメータを下図のように設定します。
"Point A"のx座標を0から-1に変更しています。
"Point B"のx座標が1のため、こうすることで中点が[0, 0, 0]になります。
そして"Number of Points"を"3"にするとポイント数が3つ均等割りに配置されるので中点が生まれます。
Group SOP
中点だけアニメーションさせたいので「Group SOP」を使い、中点のみのGroupを作成します。
PointのGroupを作りたいので"Group"タブの"Entity"は"Point"にします。
"Create"タブでは"Number"を"ON"にして数字での指定をアクティブにします。
またRangeの指定をして中点だけ指定されるようにします。
Rangeの指定の仕方についてはこちらの記事を参照してください。
Transform SOP
Group SOPから「Transform SOP」を繋ぎアニメーションの準備をします。
その時"Group"に先ほど作成した"group1"を指定します。
Convert SOP
そして最後に「Convert SOP」を繋げます。
「Convert SOP」はその名の通り色々な変換をしてくれるSOPです。
"From Type"で元の属性を指定し、"Convert to"で変換後の属性を指定します。
変換後を"Bezier Curve"に指定することで、ベジエ曲線を作ることができます。
イージングを実装する
イージングと言っても色々種類がありますが、今回はバネっぽい「Elastic」という種類をやっています。
これを実装するには「Lag CHOP」が有効です。
Lag CHOP
"Lag"とは"遅延"のことで、数値に遅延を与えることができます。
またパラメータの中で"Overshoot"というのがあり、これは"超過"を指定します。
OverShootを指定することで入力の数値を超過させることが可能になります。
2つフィールドがありますが、最初が上方向2番目が下方向の超過です。
「Operator Snippets」に色々なサンプルがあります。
このLagで生成した値を「Transform SOP」のy座標に与えてあげれば完成です。
最後にYoutubeへのリンクを貼っておきます。
