孫廣東  2015.7.10

其實熟悉NGUI的人，應該知道  實現漸隱漸現 FadeIn/Out 效果是很方便的，因為父物件 的 改變會自動影響到子物件。 比如 UIWidget、UIPanel等元件都有 Alpha屬性，在Inspector面板上可以直接設定拖拽的改變看看。  確實如此。

但是到UGUI呢，沒有這麼方便。  需要熟悉一下 元件的內部和繼承關係了！

UI中每個能夠顯示控制元件都會有一個CanvasRender物件，CanvasRender有什麼作用呢？ 官方的解釋：The Canvas Renderer component renders a graphical UI object contained within a Canvas.  簡單的翻譯過來就是，畫布上的渲染器元件將呈現包含在一個畫布內的圖形使用者介面物件，再仔細檢視CanvasRenderer類

時我們可以看到有兩個方法SetAlpha ，SetColor，顯然我們可以修改透明度Alpha和Color來實現漸隱漸現，同時我

們還可以發現Button，Text，Image等控制元件都會整合自Unity.UI.Graphic

public class Text : MaskableGraphic, ILayoutElement
 
public abstract class MaskableGraphic : Graphic, IMaskable
 
public class Image : MaskableGraphic, ICanvasRaycastFilter, ISerializationCallbackReceiver, ILayoutElement
 

然後我們再閱讀Graphic程式碼，我們會發現有兩個方法：

public void CrossFadeAlpha(float alpha, float duration, bool ignoreTimeScale);
public void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha);

因為原始碼是開源的，大家可以自己去看看！

因此我們利用CrossFadeColor或CrossFadeAlpha這兩個方法就可以實現漸隱漸現了

void Start()
{
 
Component[] comps = GameObject.Find("/Canvas").GetComponentsInChildren<Component>();
foreach (Component c in comps)
{
if (c is Graphic)
{
(c as Graphic).CrossFadeAlpha(0, 1, true);
}
 
}
}
 

但是 Unity提供的方法很有限，就是 要做延遲怎麼辦？ 要在結束後執行回撥怎麼辦？ 要改變漸變曲線怎麼辦？

我們在知道 原理了之後，就可以 在看看 DOTween 補間動畫外掛。

官方文件有專門 的區域 API 是針對 Unity4.6種的UGUI元素的。【自己去看】

        #region 漸顯/漸隱的形式 對選單物件
        /// <summary>
        /// 漸現選單
        /// </summary>
        /// <param name="targetGO">選單遊戲物件</param>
        public static void FadeOpenMenu(GameObject targetGO)
        {
            Component[] comps = targetGO.GetComponentsInChildren<Component>();
            for (int index = 0; index < comps.Length; index++)
            {
                Component c = comps[index];
                if (c is Graphic)
                {
                    //(c as Graphic).color = new Color(1, 1, 1, 0);
                    // (c as Graphic).CrossFadeAlpha(1f, MENU_FADE_IN_TIME, true);
                    (c as Graphic)
                        .DOFade(0f, MENU_FADE_IN_TIME)
                        .SetDelay(CAMERA_ZOOM_IN_DELAY)
                        .SetEase(MENU_SCALE_OPEN_TYPE)
                        .From()
                        .OnComplete(
                        () =>
                        {
                            MenuSignalManager.OpenedMenuSignal.Dispatch();
                        });
                }
            }
            // 執行完畢的回撥
        }
        /// <summary>
        /// 漸隱選單(無銷燬操作)
        /// </summary>
        /// <param name="targetGO">選單遊戲物件</param>
        public static void FadeCloseMenu(GameObject targetGO)
        {
            Component[] comps = targetGO.GetComponentsInChildren<Component>();
            for (int index = 0; index < comps.Length; index++)
            {
                Component c = comps[index];
                if (c is Graphic)
                {
                    //(c as Graphic).CrossFadeAlpha(0, MENU_FADE_OUT_TIME, true);      // 當然瞭如果認為不方便的話，可以使用dotween的Graphic的DoColor、DoFade
                    (c as Graphic).
                        DOFade(0, MENU_FADE_OUT_TIME)
                        .SetEase(MENU_FADE_OUT_TYPE)
                        .OnComplete(() =>
                    {
                        MenuSignalManager.CloseedMenuSignal.Dispatch(targetGO);
                    });
                }
            }
            // 執行完畢的回撥
        }
        #endregion