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的时间，是不是感觉很强大呢！