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就可以看到進度條變化了。