本日はUnityの小ネタ枠です。
Unityでアニメーションを使ってテキストのフェードアウトを表現する方法を記事にします。
アニメーションクリップの設定
Textオブジェクトを配置したサンプルシーンを用意しました。
このテキストが徐々に透明になってフェードアウトする表現をアニメーションを使って設定してみます。
アニメーションを作成するには「アニメーションクリップ」を利用します。
Textオブジェクトを選択した状態で[Window -> Animation -> Animation]をクリックします。
Animationウィンドウが開くので[Create]をクリックします。
保存ダイアログが開くので、アニメーションファイルの保存先を指定して[保存]をクリックします。
すると以下のファイルの保存と設定が自動で行われます。
1.新規のAnimatorControllerファイルの作成
2.新規のAnimationファイルの作成
3.Textオブジェクトに[Animator]コンポーネントの追加
4.[Animatior]コンポーネントのコントローラに作成したAnimatorControllerの設定
新規作成したAnimatorControllerにはAnimationへの自動遷移が既に設定されています。
つまり、Animationファイルを編集するだけでTextオブジェクトがアニメーションする準備が整っています。
アニメーションの作成
次にフェードアウトのアニメーションを作成してみます。
Animationウィンドウの[Add Property]をクリックするとプルダウンが表示されます。
ここには編集可能なTextオブジェクトにアタッチされたコンポーネントの一覧が表示されます。
テキストの透明度の変更を設定するため、[Add Property] -> [TextMeshPro] -> [FontColor]の[＋]ボタンをクリックします。
FontColor要素が追加されます。
[Samples]がアニメーション全体のフレーム数です。デフォルトでは60が設定されています。
アニメーションのフレーム数を変更したい場合はこの数値を編集します。
アニメーション全体の再生時間を変更したい場合は最終キーフレームの位置を変更します。
最終キーフレームを選択して[FontColor.a]の値を0に設定します。
これで最終フレームに向けてテキストの色が徐々に透明になるアニメーションが設定できました。
ループの無効化
このままだとアニメーションがループしてしまうのでループの設定を無効にします。
animファイルのInspectorビューから[LoopTime]のチェックを外します。
アニメーション速度の変更
アニメーションの速度を変更してフェードアウトの速度を変更します。
アニメーションコントローラ内のフェードアウトアニメーションを選択し、[Speed]項目でアニメーションの速度倍率を変更できます。
動作確認
シーンを再生して動作を確認します。
[再生]ボタンをクリックするとTextオブジェクトが徐々に透明になって消えるアニメーションが確認できます。
