Unity-Ugui-如何製作圓環進度條 (Animation)

在場景下 GameObject –> UI –> Image 建立右圖有關Radial Loading的物件。

圓環進度條的結構

Radial Loading :控制整個圓環進度條的地方。這邊會增加一個Animator的Component。 一開始Controller的地方裡面是沒有控制物件的。

Background:放置圓環進度條的底圖。載入圓環底圖,設定好顏色跟透明度。

Loading Bar:放置圓環進度條顯示時的圖。

回到Background這邊的Inspector下面的Animator這個組件。 一開始新增時,裡面並沒有任何有關這個Animator的控制件。
接下來到Windows –> Animation –> Animator 裡新增一個Animator 叫做 Radial Loading 這個會新增在Asset裡面。
之後在這個Animator下面新增一個Animation。按下Create按鍵後,就可以開始編輯動畫。

新增一個Animation

按下Add Property 把Background物件裡的 Is Active 跟Image的Full Amount加入。然後把Loading Bar物件的的 Is Active跟Image 的Full Amount也一併加入。

按下 Record鍵,開始錄製。
首先在0:00的地方做好設定。

接下來再0:30的地方添加影格並做設定。

0:60的地方做設定。

設定好Animator Controller跟Animation之後回到Radial Loading的 Animator的Controller就有剛剛設定好的控制物件。

在Asset下面會出現設定好的Animator跟Animation。

Animator Controller畫面腳本

呈現的效果如下:

參考資料:
Unity/Animator — 創建Animator Controller

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *