「Unity3D」(5)CanvasGroup功能和Fade動畫

CanvasGroup 對於UGUI來說，提供了十分重要的便利功能，並且能夠受益於Unity實現的性能優化。從命名來看Group明顯是針對“批量”操作的一個概念。對於複雜的UI界面，會有意想不到的效果和效率。

• Alpha 能夠控制所有子節點UI元素的透明度。無論界面多麼的複雜，只要是Graphic的子類，都能夠被控制。這省去了針對各個元素，運行時的遍歷，或是設計時的配置。

• Interactable 能夠控制所有子節點UI元素的交互性。無論界面多麼複雜，只要是Selectable的子類，都能夠被控制。交互性就是Button控件不可用的灰色狀態，如同取消了Button的Interactable屬性。

• Blocks Raycasts 能夠控制所有子節點UI元素事件觸發。無論界面多麼複雜，只要是Graphic的子類，都能夠被控制。相當於取消了Graphic元素的Raycast Target屬性。

• Ignore Parent Groups 控制當前元素可受到，父類CanvasGroup的屬性影響。

當使用CanvasGroup控制的時候，我們會看到UI子元素的，Alpha，Interactable，RaycastTarget屬性並沒有改變。可見在UGUI源碼裏，是使用CanvasGroup的屬性做了過濾操作，來實現控制效果的。

既然CanvasGroup可以控制整體界面的Alpha值，那麼利用這個特性，來做Fade漸變動畫，就在合適不過了。既可以使用協程也可以使用tween算法。比如，我就使用tween提供了UI界面的整體Fade功能。

/// <summary>
/// Fade in GameObject all children Graphic.
/// </summary>
public static void FadeInUI(this GameObject go, float duration, Action OnComplete = null)
{
    var canvasGroup = go.GetComponent<CanvasGroup>();

    if (canvasGroup == null)
    {
        canvasGroup = go.AddComponent<CanvasGroup>();
    }

    canvasGroup.ActionFadeIn(duration).Play();

    if (OnComplete != null)
    {
        Tween.Create().AddIntervalCallback(duration, OnComplete).Play();
    }
}


/// <summary>
/// Fade out GameObject all children Graphic.
/// </summary>
public static void FadeOutUI(this GameObject go, float duration, Action OnComplete = null)
{
    var canvasGroup = go.GetComponent<CanvasGroup>();

    if (canvasGroup == null)
    {
        canvasGroup = go.AddComponent<CanvasGroup>();
    }

    canvasGroup.ActionFadeOut(duration).Play();

    if (OnComplete != null)
    {
        Tween.Create().AddIntervalCallback(duration, OnComplete).Play();
    }
}

不僅如此，是否可以使用CanvasGroup的Alpha = 0 且 Blocks Raycasts = false，來達到隱藏界面的目的，以此來代替Active false的操作。

---

「小組件大作用」