在各類產品中，關於進度條的展現方式各異，而筆者選擇了常見的勻速環形進度條，向我們展示了用Axure製作的要點與邏輯。
01 最終效果
- 元件加載環形（圓形）進度條自動增長（勻速）
- 百分比數值跟隨變化
- 進度條增長到一定長度停止增長（百分比跟隨停止）
02 注意事項
- 本教程用Axure9作為教程說明工具（Axure8可適用）
- 本教程對於Axure基本操作不做贅述
03 製作難點
- 實現思路的邏輯（循環事件的應用）
- 全局變量與交互事件的應用
04 元件準備
圖中帶有閃電標識表示有創建交互事件的元件：
05 交互邏輯思路
1. 元件載入（2號元件）設置文本框（5號元件）的文本為 0
- 說明a：文本框（5號元件）文本默認文本不為0，此時設置為0，即改變了文本框（5號元件）的文本；
- 說明b：當文本框（5號元件）文本改變時，同時執行百分比文本標籤（6號元件）百分比數值勻速增長和環形（圓形）進度條同速度勻速增長。
2. 怎麼實現百分比文本標籤（6號元件）百分比數值勻速增加？
文本框（5號元件）設置如果全局變量的值小於97，那麼執行等待37毫秒。
設置全局變量的數值加1（全局變量初始值為0）；
設置百分比的數值部分為全局變量的數值；
設置文本框（5號元件）的文本為全局變量。
說明a：等待37毫秒的37毫秒怎麼來的？
設計環形（圓形）進度條如果自增長至圓環的時間為4000毫秒，對應百分比數值為100%，那麼百分比數值增加1%，用的時間為4000/100=40毫秒。
經實際測試，40毫秒調整為37毫秒，百分比數值增長與環形（圓形）進度條增長速度一致。（為什麼，作者也沒搞明白，有知道的告訴我）
說明b：百分比增長是什麼原理實現的？
文本框（5號元件）文本改變時就設置全局變量加1，緊接著設置新的全局變量給文本框 （5號元件），從而導致文本框（5號元件）文本改變時，從而又執行一次此事件，形成循環事件。
3. 怎麼實現環形（圓形）進度條的自增長？
緊接著步驟1，元件載入（2號元件）設置文本框（5號元件）的文本為0；
旋轉右側半圓180度，勻速用時2000毫秒；
等待2000毫秒 旋轉左側半圓169.2度，用時1880毫秒。
說明a：旋轉左側半圓為什麼169.2度，用時1880毫秒？
最終效果需要在百分比97%已經對應環形（圓形）進度條97%的位置停止自增長。
360度對應圓環100%，97%圓環對應349.2度，右側半圓全部走完180度，左側半圓剩下349.2-180=169.2度。
4000毫秒對應圓環100%，97%圓環對應3880毫秒。右側半圓全部走完需要2000毫秒，3880-2000=1880毫秒。
詳解右側動態面板在轉動半圓中的結構：
分解後的動態圖：
本文由 @東方夜明 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
