Unity 实现进度条

（本次实现，底框图片的进度条满。如果底框图片进度条空，实现方法一样，只是相应锚点方向会相反。）

效果预览

放上进度条的底框

添加Mask

设置Pivot在最右边，使得Mask固定在右边，当Mask宽度缩短时，内容是从左边露出来。

叠加空进度条

关闭Mask的 “Show Mask Graphic”。

现在你从左边拖拽Mask的宽度，会看到底部的绿色进度显示出来。

所以，关键是控制 Mask的宽度就可以实现进度条了。

新建脚本 UIQuestProgress.cs

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


[ExecuteInEditMode]
public class UIQuestProgress : MonoBehaviour
{
    public Image mask;
    public float value;
    float originalSize;


    // Start is called before the first frame update
    void Start()
    {
        originalSize = mask.rectTransform.rect.width;
    }


    // Update is called once per frame
    void Update()
    {
        setValue(value);
    }


    /// <summary>
    /// 完成进度。 取值范围 0～1.0
    /// </summary>
    void setValue(float value)
    {
        var unfinishValue = Mathf.Max(0, 1.0f - value);
       
        mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, originalSize * unfinishValue);
    }
}

应用UIQuestProgress.cs脚本

修改value就可以看到进度条变化了。