用 Particle System 實作模糊效果的圓形進度條

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

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

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

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

用 Particle System 製作一個環形

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

然後調整這些參數（參數名 | 建議數值 | 說明）：

General

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

Emission

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

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

Shape

（圖片：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 度，但是這樣會遇到幾個問題：

當速度不變，而角度越小的時候，花費的時間會越少。這其實不算大問題，要看當時的設計稿是如何要求的，而這裡希望是所有百分比，都能維持相同的時間，所以 shape.arcSpeed 需要調整
當粒子數量不變，而角度越小的時候，會造成爆棚的現象，所以這裡要將百分比乘上 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 ();
    }
}

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