Unityでは、uGUIのCanvasGroupとアニメーションライブラリ DoTween を用いることで、上のGIFのようなフェードイン・フェードアウトは非常に簡単に実現できます。
下記にフェードイン・フェードアウトを行うことができる、自作CanvasGroupの拡張メソッドを示します。
using DG.Tweening;
using UnityEngine;
namespace Murosta.Utility
{
public static class CanvasGrouopExtensions
{
public static Tweener FadeOut(this CanvasGroup canvasGroup, float duration)
{
return canvasGroup.DOFade(0.0F, duration);
}
public static Tweener FadeIn(this CanvasGroup canvasGroup, float duration)
{
return canvasGroup.DOFade(1.0F, duration);
}
}
}
以下、CanvasGroupのドキュメントより。
Canvas Group は、個別に処理することなく一ヶ所から UI 要素のグループ全体における特定の機能を与えるのに用いることができます。CanvasGroupのプロパティーは、そのコンポーネントがアタッチされているゲームオブジェクトだけでなく、すべての子要素に影響を与えます。
CanvasGroupを使うと、対象ゲームオブジェクトとその子階層のゲームオブジェクトの全てのUIコンポーネントの設定をまとめて行うことができます。設定項目は、Interactableかどうか、Raycastをブロックするかどうか、そしてα値などです。
さて、アニメーションライブラリ DoTweenには、CanvasGroupクラスの拡張メソッドとして、DOFadeというメソッドが定義されており、このメソッドを使うことでCanvasGroupのα値を刻々と変化させることができます。
このようにUnityでは、uGUIのCanvasGroupとアニメーションライブラリ DoTween を用いることで、上のGIFのようなフェードイン・フェードアウトは非常に簡単に実現できます。