###### tags: `Unity UI`

[TOC]

# UI Circle Loading

## UI事前準備

1. 先準備兩個圓圈，一黑一白。

2. 新增兩個Image，並把兩個圓圈都放入Image


3. 以白色圓圈來看

- 將 `Image Type` 改成 `Filled`

- 更改 Fill Amount

**Fill Amount 的值介於 0 ~ 1 之間**


## 實作按下按鈕後的縮圈效果

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

public class SkipVideo : MonoBehaviour
{
    [SerializeField] private Image CircleFill;
   
    private float progress = 0; 
    //progress最大只能是1 ，最小是0。 對應 Image 的 Fill Amount

    [SerializeField] private Text Progress_text;

    private float sec = 2;

    void Update()
    {
        if (Input.GetKey(KeyCode.KeypadEnter))  //按下ENTER
        {
            if (progress >= 1)  
            {
                progress = 1;
            }
            else
            {
                progress += (1 / sec) * Time.deltaTime; // Enter 按住 sec 秒後會按滿
            }
        }
        else
        {
            if (progress > 0)
            {
                progress -= (1 / sec) * Time.deltaTime;
            }
            else
            {
                progress = 0;
            }
        }

        CircleFill.fillAmount = progress;
        Progress_text.text = ((int)(progress * 100)).ToString();
        //text顯示的值介於 0 ~ 100 而 progress 介於 0 ~ 1
    }
}

## 成果