UEFNのUIにはシンプルなプリセットアニメーションが用意されていて、インターフェースの表示と非表示が可能です。しかし、様々なアニメーションを行いたい場合、ほとんどの作業はマテリアルで実現する必要があります。

今回は、マテリアルとマテリアルパラメータコレクション、レベルシーケンスを使用して、スクラッチカード効果のUIアニメーションを作成してみましょう。

1.マテリアルの制作

まず新しいマテリアルを作成し、マテリアルの設定をUserInterfaceに、BlendModeをMaskedに設定します。（ステップ1）

左クリック+Tで2つのTextureSampleを作成し、それぞれスクラッチカードのベース画像と銀色の塗装層のマスクレイヤーを読み込みます。（ステップ2）

次に、2つの画像の混ざり具合を変更するため、左クリック+LでLerpを作成します。（ステップ3）

２つの画像の切り替えをより自然に行いたいので、LerpのAlphaに接続するためのマスクを作成します。左クリック＋UでTexCoordを作成します。（ステップ4）

マスクを作成し、マスクのRチャンネルを選択することで、横方向のグラデーションベクトルを取得できます。（ステップ５）

これを使って、スクラッチカードのマスクを作成します。テキストがすぐに見えないようにするために、Multiplyを使用してグラデーションの濃さを強化します。（ステップ６）

*右クリックでノードを選択し、Start Previewing Mode をクリックすることで現在の効果をプレビューできます。

マテリアルを保存し、ContentsBrowserで新しくMaterialParameterCollectionを作成します。（ステップ７）

ダブルクリックで開き、パラメータの名前を設定し、デフォルト値を約1に設定します。（ステップ８）

マテリアルエディタに戻り、作成したMaterialParameterCollectionをノードエリアにドラッグして（ステップ9）、Parameter Nameをステップ8で設定した名前にします。

次に、右クリックでRemapValueRangeを検索して作成し、（ステップ11）

左クリック+1で最大値と最小値（例えば0と10）を作成し、Parameterの値を最大値と最小値にマッピングします。

さらに、右クリックでAppend（ステップ12）とSubtract（ステップ12）を検索して作成します。これで、マスクの動作をコントロールできるようになります。

Multiplyの後に、右クリックでClampを検索して作成し、それをLerpのAlphaに接続します。

さらに、スクラッチカードの削り方に近づけるために、CustomRotatorを使用してマスクの角度を回転させます（ステップ15）。

次に、TextureSampleを再作成し、UEFNが提供するノイズ画像を検索し、Multiplyを使ってマスクと乗算します（ステップ16）。これにより、マスクに不規則な形状を与えることができます。

これでマテリアルは完成です！

別のウィンドウでMaterialParamaterCollectionを開き、デフォルト値を調整すると、スクラッチカードの塗装が変化することが確認できます。

このマテリアルをImageとしてWidgetBlueprintに配置しましょう。

---

2.レベルシーケンスの設定

ContentsBrowserから新しいLevel Sequenceを作成し、開きます。

TrackからMaterial Parameter Collection Trackを追加し、ステップ7で作成したMaterial Parameter Collectionを選択します。次に+ボタンを押し、ステップ8で設定したパラメータの名前を選択します。

白いタイムラインをドラッグして数字を調整し、小さな丸いキーフレームを打つことで、スクラッチカードのアニメーションを作成できます。アニメーションを調整した後、ContentBrowserからMovie Sequence仕掛けをドラッグして、作成したLevel Sequence（ステップ20）を読み込み、Movie Sequenceの再生機能を他のデバイス（トリガー、ボタンなど）にバインドします。

以上です！お疲れ様でした！

Reference：https://www.youtube.com/watch?v=G3GaECZHxkksi=wCPq7jhRYfTNARwM&v=G3GaECZHxkk&feature=youtu.be