unity图片`fillAmount`填充方法

逃离我推掉我的手 2023-10-12 13:34 9阅读 0赞

## 前言 ##

在Unity中，`Image`是一种用于显示2D图像的组件，而`fillAmount`属性则是`Image`组件中一个非常常用的属性之一，用于控制图片填充的比例。在这篇文章中，我们将会介绍`fillAmount`属性的详细用法。

### 介绍 ###

`fillAmount`属性是`Image`组件中的一个实数类型属性，用于控制图片填充的比例。该属性的取值范围在0到1之间，表示填充图案的占比，0表示没有填充，1表示完全填充。

### 方法 ###

`fillAmount`属性的使用非常简单，只需要将其设置为一个介于0到1之间的实数即可，例如：

using UnityEngine;
    using UnityEngine.UI;
    
    public class Example : MonoBehaviour
    {
        
        public Image myImage;
    
        void Start()
        {
        
            myImage.fillAmount = 0.5f;
        }
    }

在上述代码中，我们首先定义了一个`Image`类型的变量`myImage`，然后在`Start`方法中设置了`myImage`的`fillAmount`属性为0.5。这样，当该脚本被加载时，`myImage`的填充图案就会显示一半。

需要注意的是，当我们设置`fillAmount`属性时，如果该属性的值小于0，则图片将不会被填充；如果该属性的值大于1，则图片将被完全填充。

### 举例子 ###

#### 例子1：进度条 ####

一个常见的应用场景是制作一个进度条（ProgressBar），用于显示某个任务的完成进度。我们可以使用`fillAmount`属性来实现这个功能。以下是一个简单的例子：

using UnityEngine;
    using UnityEngine.UI;
    
    public class ProgressBar : MonoBehaviour
    {
        
        public Image fillImage;
    
        public void SetProgress(float progress)
        {
        
            fillImage.fillAmount = progress;
        }
    }

在上述代码中，我们首先定义了一个`Image`类型的变量`fillImage`，然后定义了一个名为`SetProgress`的方法，该方法接受一个浮点数类型的参数`progress`，用于设置进度条的填充比例。在`SetProgress`方法中，我们将`progress`参数的值赋给`fillImage`的`fillAmount`属性，从而实现了进度条的功能。

#### 例子2：倒计时 ####

另一个常见的应用场景是制作一个倒计时（Countdown）功能，用于倒计时某个任务的剩余时间。以下是一个简单的例子：

using UnityEngine;
    using UnityEngine.UI;
    
    public class Countdown : MonoBehaviour
    {
        
        public Image fillImage;
        public float totalTime = 10;
    
        private float remainingTime;
    
        void Start()
        {
        
            remainingTime = totalTime;
        }
    
        void Update()
        {
        
            remainingTime -= Time.deltaTime;
            fillImage.fillAmount = remainingTime / totalTime;
    
            if (remainingTime <= 0)
            {
        
                //倒计时结束
            }
        }
    }

在上述代码中，我们首先定义了一个`Image`类型的变量`fillImage`，以及一个浮点数类型的变量`totalTime`，表示倒计时的总时间。在`Start`方法中，我们将`remainingTime`变量初始化为`totalTime`，表示剩余时间为总时间。在`Update`方法中，我们使用`Time.deltaTime`来计算每一帧的时间差，从而计算出剩余时间。然后，我们将剩余时间除以总时间，得到当前的填充比例，并将其赋给`fillImage`的`fillAmount`属性。当剩余时间小于等于0时，表示倒计时结束，我们可以在该代码块中执行倒计时结束的操作。