Unity 動態載入Panel並實現淡入淡出

　　unity版本：4.5 NGUI版本：3.6.5

　　參考鏈接：http://tieba.baidu.com/p/3206366700，作者：百度貼吧 水岸上

　　動態載入NGUI控件，這里用Panel為例說明。

1、如何創建NGUI控件的預設：

　　在要保存prefab文件的目錄下鼠標右鍵Create Prefab，保存預設名字，然后直接把Hierarchy中的控件拖到預設中即可；

2、實現Panel淡入淡出的代碼，在預設Panel中添加下述代碼的腳本組件：

　　

　　代碼如下：

using UnityEngine;
using System.Collections;

public class PanelFade : MonoBehaviour
{
    // 表示Panel正在打開
    public bool _opening;
    // 表示Panel正在關閉
    public bool _closing;

    void Start()
    {
        // 初始時_opening設為true，實現打開時淡入效果
        _opening = true;
        _closing = false;

        // alpha設為0，為全透明
        gameObject.transform.GetComponent<UIPanel>().alpha = 0;
    }

    // Update is called once per frame
    void Update()
    {
        // 處於打開狀態，alpha隨時間增加
        if (_opening == true)
        {
            // 找到Panel的alpha的值，隨時間增加，實現淡入效果
            gameObject.transform.GetComponent<UIPanel>().alpha += Time.deltaTime * 4f;

            // 當alpha>=1時，打開狀態結束，_opening設置false
            if (gameObject.transform.GetComponent<UIPanel>().alpha >= 1)
                _opening = false;
        }

        if (_closing == true)
        {
            // 處於關閉狀態，alpha隨時間減少
            gameObject.transform.GetComponent<UIPanel>().alpha -= Time.deltaTime * 4f;

            // alpha小於0，關閉狀態結束，_closing設為false，並且在UI Root下刪除該Panel
            if (gameObject.transform.GetComponent<UIPanel>().alpha <= 0)
            {
                _closing = false;
                NGUITools.Destroy(gameObject);
            }
        }
    }
}

　　上訴代碼，在start函數中把 _opening 賦值為true，創建預設時，將該代碼添加到Panel組件中，在panel創建時自動實現淡入效果，淡入效果的調整則調節alpha隨時間減少部分的代碼；

2、淡出效果：

　　我們在要創建預設的Panel下創建一個按鈕，點擊可關閉panel並且實現關閉時淡出效果：

　　

　　代碼如下：

using UnityEngine;
using System.Collections;

public class DeletePanelPrefab : MonoBehaviour 
{
    void OnClick()
    {
        // 找到該按鈕要關閉的Panel對象中的PanelFade腳本
        PanelFade _panelfade_script = gameObject.GetComponentInParent<PanelFade>();
        // 把腳本中對應關閉狀態的_closing設為true
        _panelfade_script._closing = true;
    }
}

　　代碼中實現了對按鈕點擊事件的監聽，監測到點擊按鈕時，找到Panel下的腳本，把_closing值賦為true，即表示panel正在關閉；

　　上述1、2兩步驟即完成了預設的創建、panel的淡入淡出效和預設的刪除；

3、用NGUI創建一個按鈕來測試上面功能是否能實現：

　　創建一個按鈕並為其添加腳本，代碼如下：

using UnityEngine;
using System.Collections;

public class CeeatePanelByPrefab : MonoBehaviour
{
    // panel的預設
    public GameObject _panel_prefab;
    // NGUI的UI Root
    public GameObject _uiroot;

    void OnClick() 
    {
        // 為_uiroot對象添加子對象 
        GameObject panel = NGUITools.AddChild(_uiroot, _panel_prefab);
        // panel的位置調整
        panel.transform.localPosition= new Vector3(-200,0,0);
    }
}

　　拖動相關對象為代碼中的_panel_prefab和_uiroot賦值，如下圖：

　　點擊按鈕就可以實現動態創建panel，點擊panel中的按鈕可實現刪除panel，並在panel的出現和消失時附有淡入淡出效果。

 

 

重寫了相關部分的代碼，可以自己設置淡入淡出的時間以及淡出后刪除本面板的功能：

using UnityEngine;
using System.Collections;

public class PanelFade : MonoBehaviour
{
    // 表示Panel正在打開
    private bool _opening;
    // 表示Panel正在關閉
    private bool _closing;
    
    // 相關時間
    public float _open_delay_time = 0;
    public float _close_delay_time = 0;
    public float _open_time = 0.08f;
    public float _close_time = 0.08f;
    public float _invoke_time = 0.01f;

    // 設置淡入的延遲時間（即幾秒后開始淡入）
    public float OpenDelayTime
    {
        get
        {
            return this._open_delay_time;
        }
        set
        {
            this._open_delay_time = value;
        }
    }

    // 設置淡出的延遲時間
    public float CloseDelayTime
    {
        get
        {
            return this._close_delay_time;
        }
        set
        {
            this._close_delay_time = value;
        }
    }

    // 淡出時間
    public float CloseTime
    {
        get
        {
            return this._close_time;
        }
        set
        {
            this._close_time = value;
        }
    }

    // 淡入時間
    public float OpenTime
    {
        get
        {
            return this._open_time;
        }
        set
        {
            this._open_time = value;
        }
    }

    // 每次刷新的時間
    public float InvokeTime
    {
        get
        {
            return this._invoke_time;
        }
        set
        {
            this._invoke_time = value;
        }
    }

    // 設置面板的打開狀態，true表示正在打開
    public bool PanelOpen
    {
        set
        {
            if (this._opening == false && value == true)
            {
                this._opening = value;
                InvokeRepeating("OpenFade", this._open_delay_time, this._invoke_time);
            }
        }
    }

    // 面板關閉並刪除該面板
    public bool PanelCloseAndDestory
    {
        set
        {
            if (this._closing == false && value == true)
            {
                this._closing = value;
                InvokeRepeating("DesrotyFade", this._close_delay_time, this._invoke_time);
            }
        }
    }

    // 面板的關閉狀態，true表示正在關閉
    public bool PanelClose
    {
        set
        {
            if (this._closing == false && value == true)
            {
                this._closing = value;
                InvokeRepeating("CloseFade", this._close_delay_time, this._invoke_time);
            }
        }
    }

    void Start()
    {
         // 初始時淡入
        this.PanelOpen = true;
    }

    // 實現打開時淡入的功能函數
    void OpenFade()
    {
        gameObject.transform.GetComponent<UIPanel>().alpha += this._invoke_time / this._open_time;

        if (gameObject.transform.GetComponent<UIPanel>().alpha >= 1)
        {
            this._opening = false;
            CancelInvoke("OpenFade");
        } 
    }

    // 關閉時淡出的函數
    void CloseFade()
    {
        gameObject.transform.GetComponent<UIPanel>().alpha -= this._invoke_time / this._close_time;

        if (gameObject.transform.GetComponent<UIPanel>().alpha <= 0)
        {
            this._closing = false;
            CancelInvoke("CloseFade");
        }
    }

    // 面板刪除淡出的函數
    void DesrotyFade()
    {
        gameObject.transform.GetComponent<UIPanel>().alpha -= this._invoke_time / this._close_time;

        if (gameObject.transform.GetComponent<UIPanel>().alpha <= 0)
        {
            this._closing = false;
            CancelInvoke("DestoryFade");
            NGUITools.Destroy(gameObject);
        }
    }
}