Unity中的UGUI圖片填充模式以及特定時間內使其填充值爲0（常用於遊戲中的時間條）詳解

Unity中的UGUI圖片填充模式以及特定時間內使其填充值爲0（常用於遊戲中的時間條）詳解

UGUI中的圖片填充模式可謂是功能很是強大，因爲這個能根據你的想法逐漸顯示圖片，可以從上往下逐漸顯示圖片，或者是以一定的角度顯示圖片等，可謂是特效滿天飛。

其中的Image Type設置爲Filled就是設置圖片的類型爲填充模式，Fill Method的值爲Vertical意思是填充方向爲垂直填充，意思就是可以從下往上填充或者是從上往下填充；Fill Origin的值爲Bottom意思是填充方向爲從下往上逐漸填充；Fill Amount的值爲1就是完全把圖片的大小給顯示出來，意思就是不缺斤少兩，而當這個值爲0的時候就是不顯示圖片，如果我們想要逐漸顯示圖片的話，就要用代碼來進行控制了。好了，廢話不多說，直接看下列代碼！

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class GameMange : MonoBehaviour {
	public static GameMange gm;   
    public Image kaishiback;  //腳本綁定某個物體後，把我們想要漸變的圖片直接拖進去
 
    void Start () {
        gm = this;  //確保使用單列模式之前已經實例化
        kaishiback.fillAmount = 0;  //確保能使用逐漸填充模式看到效果 
        isout = true;   //遊戲運行時就進行圖片逐漸填充效果
    }
    void Update()
    {
        if (isout)
        {
            kaishiback.fillAmount += Time.deltaTime * 0.5f;
            if(kaishiback.filAmount == 1){
				isout = false;    //圖片填充完畢後，關閉圖片填充程序，節省系統資源
			}
        }
    }
}

在這裏小編就要提醒一下大家，在使用這個填充模式的時候就一定要導入using UnityEngine.UI;這個命名空間，否則的話系統會報錯。

接下來小編就要給大家介紹這種模式的新的一種用法，常用於遊戲中的時間條：
現在圖片的填充量爲1，也就是正常顯示圖片的大小，不缺斤少兩，我們現在要想使這個圖片的填充量在一段時間內使圖片的填充量從1逐漸變爲0，好了，廢話不多說，直接看下列代碼:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class GameMange : MonoBehaviour {
	public static GameMange gm;   
    public Image kaishiback;  //腳本綁定某個物體後，把我們想要漸變的圖片直接拖進去
 
    void Start () {
        gm = this;  //確保使用單列模式之前已經實例化
        kaishiback.fillAmount = 0;  //確保能使用逐漸填充模式看到效果 
        isout = true;   //遊戲運行時就進行圖片逐漸填充效果
    }
    void Update()
    {
        if (isout)
        {
            kaishiback.fillAmount -= Time.deltaTime / 35;  
              if(kaishiback.filAmount == 0){
				isout = false;    //圖片填充量變爲0後，也就是不顯示圖片，停止執行圖片不顯示代碼，節省系統資源
        }
    }
}

意思是在35秒內從圖片的填充量爲1逐漸變爲0，注意圖片是逐漸變爲0，也就是我們能看到圖片的一種漸變效果，而且還能控制從1變爲0的時間，是不是感覺很強大呢！