實現圓形進度條的方式有很多種,最簡易的方式就是調整 Image 的參數: Image Type – Filled 、Fill Method – Radial 360、Fill Origin – Top,這篇文章 裡有更詳細的介紹。但這個方式無法符合所有設計稿的需求,例如模糊效果、圓角、流動效果等等,本篇使用 Particle System 來實現圓形進度條,完成後的成品會類似這樣:

Particle System 有非常多參數,可以做到各種強大的效果,本篇使用 Unity 2017.4.4f1 作為開發工具,每個 Unity 版本的 Particle System 會有些許不同,而這裡只會針對有調整到的參數來說明,更詳細的可以參考官方文件

本篇會分成以下幾個部分來分享:

  1. 用 Particle System 製作一個環形
  2. 用 Script 實現進度條
  3. 調整參數達成各種效果

用 Particle System 製作一個環形

首先建立一個 GameObject 並加上 Particle System,首先要加入適合的 Renderer – Material ,這裡使用漸層的圓形,也可以依照設計需求來做調整,但還是建議要淡入淡出才會讓環形比較滑順:

然後調整這些參數(參數名 | 建議數值 | 說明):

General

Start Lifetime | 1 | 一個粒子可以存活幾秒
Start Speed | 0 | 粒子發射時的初始速度

Emission

Rate over Time | 視需求調整 | 控制環內的粒子個數,越多越滑順,但太多會造成效能浪費,也會造成溢出現象,看起來像相片過曝的感覺。

( 圖片:過少/適中/過多 )

Shape

Shape | Circle | 調整粒子發散的形狀
Radius | 視需求調整 | 控制環型的大小
Radius Thickness | 0 ( 2017 前的版本為 Option emit from edge – false ) | 控制環的粗細
Mode | Loop | 控制粒子發散的路徑

(圖片:Mode – Random / Loop / ping pong / burst spread)

   

Color over Lifetime

Color | 視需求調整 | 調整環形顏色,可加入漸層效果

Renderer

Material | 視需求調整 | 加入自己需要的粒子材質,Shader 最基本可選用 Particle/Alpha Blended,或視需求調整

(圖片:Shader – Alpha Blended / Additive / Multiply)

用 Script 實現進度條

由於大部分進度條是從頂端、順時針增加的,所以要先改變環形的方向:

Shape

Rotation (x:180, y:0, z:-90)

再來我們要新增一個 Script 用來控制進度條,調整 shape.arc 這個參數,可以使圓環由 0% ~ 100% 顯示為 0 度 ~ 360 度,但是這樣會遇到幾個問題:

  1. 當速度不變,而角度越小的時候,花費的時間會越少。這其實不算大問題,要看當時的設計稿是如何要求的,而這裡希望是所有百分比,都能維持相同的時間,所以 shape.arcSpeed 需要調整
  2. 當粒子數量不變,而角度越小的時候,會造成爆棚的現象,所以這裡要將百分比乘上 emission.rateOverTime

using UnityEngine;

public class ParticleRing : MonoBehaviour {

    public ParticleSystem Ring;

    const float MAX_EMISSION_RATE = 60f;

    private void Update () {

        /*
        if (Ring.time >= 1f) {

            Ring.Pause ();
        }
        */
    }

    void StartRing (float progress) {

        progress = Mathf.Max (Mathf.Min (progress, 1f), 0f);

        var shape = Ring.shape;
        shape.arc = 360f * progress;
        shape.arcSpeed = progress;

        var emission = Ring.emission;
        emission.rateOverTime = MAX_EMISSION_RATE * progress;

        Ring.Play ();
    }

    void Dismiss () {

        Ring.Clear ();
        Ring.Stop ();
    }
}

完成後我們試試看現在的效果如何:

大致上已經完成了進度條的功能,如果不想讓 Particle 一直更新的話,可以用 Ring.Pause () 來達成,然後當頁面 Dismiss 的時候記得 Ring.Clear ()。

調整參數達成各種效果

完成了最基本的環狀進度條,之後可以玩玩看 Particle System 的各種參數,看看會造成什麼效果,這裡舉例幾種效果:

Noise

調整 Noise 參數可以增加雜訊,改變粒子的位置,達到以下效果:

Size Over Lifetime

調整粒子在整個生命週期的大小,可以達到以下效果:

還有很多參數都可以嘗試調整看看,會有很多不錯的效果!如果有任何建議歡迎留言。

參考資料
[1] https://www.youtube.com/watch?v=CVsZ98TSEwI
[2] Image via Stuart Rankin, CC Licensed.