環境：UE5.4
作成マテリアル：M_Sine_Graph, M_Sine_GradientColors, M_Sine_Blink, M_Sine_Move
前書き
UIマテリアルでも、少し三角関数を使うことがあります。この章では「Sine」（サイン）限定して紹介したいと思います。アニメーションをループさせる際には、主にサインしか使用しません。
他にも、ノードはありますが、それらは別の章で紹介しようと思います。
アニメーション制作では、デザイナーがタイムラインのカーブを調整することに慣れていると思います。
実際、そのカーブは直感的に調整できますが、裏にはどのカーブにも数学的な関数が存在します。
マテリアルでのアニメーションは簡単に調整できないため、カーブを作成するための基本的な数学を覚えておくと良いでしょう。
もちろん、シンプルなアニメーションをマテリアル限定し、複雑な調整が必要なアニメーションはUMGのタイムラインで作成します。
セオリー
まずは少しのセオリーから説明します。
サインは波のような形をしており、無限に上昇と下降を繰り返す関数です。「X」軸と「Y」軸の値は用途によって異なりますが、UIのアニメーションでは透明度を調整する際によく使われます。この場合、「X」軸に「秒数（時間）」を設定し、Y軸に「透明度」を設定します。
基本的なサインは縦軸で「-1」から「1」の間で動作します。
しかし、透明度の本来の範囲は「0～100%」です。そのため、サインの動作範囲を調整する必要があります。
必要な範囲は「0～1」です。
両方を重ねるとこうなります。↓
調整するにはこの関数を使用します。
| パラメータ | 用途 |
|---|---|
| a | サイン縦に大きさを調整 （掛け算） |
| b | サインの幅を調整 （アニメーションの速度） |
| c | サイン縦に位置を調整（足し算） |
| x | サインの変数（アニメーション制作では時間） |
関数だけだと分かりにくいのでDESMOSを使って関数の各パラメーターが弄られるようにゲージ化しました。以下のリンクを踏んでいただき、a,b,cの変数を変更してみて動作を確認してください。
サインを「0～1」にするために「a = 0.5」と「c = 1.0」です。
実例
[使用マテリアル：M_Sine_Graph]
ではUnreal Engineでサインの動作を見ていきましょう。
「PlotFunctionOnGraph」のノードは数学の関数を描画してくれる、デバッグ機能の一つです。
動作範囲は、グリッドの下まで伸びているため、[-1～1]の範囲で動作していることが確認できます。
UVノードを使用し、関数が描けます
動作の確認
プレビューの上の部分は白・黒で動作を表現しています。
では上記のセオリーのように、サインの動作範囲を調整してみましょう。
「ConstantBias」ノードを使用し、「Bias」を「1.0」に設定し、「Scale」を「0.5」に設定します。
サインが上方向にずれましたね。
「Lerp」章では「ConstantBias」のノードを軽く触れました。上記のセオリーを元にすれば、「ConstantBias」の「Bias」は「c」（足し算）で「Scale」は「a」（掛け算）に該当します。
ちなみに、セオリーの「b」値は速度の定義に該当するため、Timeノードに繋げてる「Multiply」ノード内の「0.5」のことです。
色の変更アニメーション
[使用マテリアル：M_Sine_GradientColors]
「Lerp」章で紹介した、「A色～B色」の間を移動するアニメーションに戻りますが、このサインを調整しないと、色がおかしくなってしまいます（サインの動作範囲が「-1～1」であるため)。定義されたオレンジよりも濃い赤になっていることが確認できます。
サインそのままだと、色がおかしくなります 動作範囲「-1,1」
調整されたサイン、よい結果を出します 動作範囲「0,1」
点滅アニメーション
[使用マテリアル：M_Sine_Blink]
テクスチャの「A」値を同じサインにかければ点滅アニメーションが作成できます。
これで基礎編は以上です。
おまけに
[使用マテリアル：M_Sine_Move]
おまけに移動アニメーションをサインで作成しました。
UVスクロールの練習を含めてサインを使用します。「Lerp」を挟んで「0～0.5」の間に動かせます。
