在各類產(chǎn)品中，關(guān)于進(jìn)度條的展現(xiàn)方式各異，而筆者選擇了常見的勻速環(huán)形進(jìn)度條，向我們展示了用Axure制作的要點(diǎn)與邏輯。

01 最終效果

• 元件加載環(huán)形（圓形）進(jìn)度條自動增長（勻速）
• 百分比數(shù)值跟隨變化
• 進(jìn)度條增長到一定長度停止增長（百分比跟隨停止）

02 注意事項

• 本教程用Axure9作為教程說明工具（Axure8可適用）
• 本教程對于Axure基本操作不做贅述

03 制作難點(diǎn)

• 實(shí)現(xiàn)思路的邏輯（循環(huán)事件的應(yīng)用）
• 全局變量與交互事件的應(yīng)用

04 元件準(zhǔn)備

圖中帶有閃電標(biāo)識表示有創(chuàng)建交互事件的元件：

05 交互邏輯思路

1. 元件載入（2號元件）設(shè)置文本框（5號元件）的文本為 0

• 說明a：文本框（5號元件）文本默認(rèn)文本不為0，此時設(shè)置為0，即改變了文本框（5號元件）的文本；
• 說明b：當(dāng)文本框（5號元件）文本改變時，同時執(zhí)行百分比文本標(biāo)簽（6號元件）百分比數(shù)值勻速增長和環(huán)形（圓形）進(jìn)度條同速度勻速增長。

2. 怎么實(shí)現(xiàn)百分比文本標(biāo)簽（6號元件）百分比數(shù)值勻速增加？

文本框（5號元件）設(shè)置如果全局變量的值小于97，那么執(zhí)行等待37毫秒。

設(shè)置全局變量的數(shù)值加1（全局變量初始值為0）；

設(shè)置百分比的數(shù)值部分為全局變量的數(shù)值；

設(shè)置文本框（5號元件）的文本為全局變量。

說明a：等待37毫秒的37毫秒怎么來的？

設(shè)計環(huán)形（圓形）進(jìn)度條如果自增長至圓環(huán)的時間為4000毫秒，對應(yīng)百分比數(shù)值為100%，那么百分比數(shù)值增加1%，用的時間為4000/100=40毫秒。

經(jīng)實(shí)際測試，40毫秒調(diào)整為37毫秒，百分比數(shù)值增長與環(huán)形（圓形）進(jìn)度條增長速度一致。（為什么，作者也沒搞明白，有知道的告訴我）

說明b：百分比增長是什么原理實(shí)現(xiàn)的？

文本框（5號元件）文本改變時就設(shè)置全局變量加1，緊接著設(shè)置新的全局變量給文本框 （5號元件），從而導(dǎo)致文本框（5號元件）文本改變時，從而又執(zhí)行一次此事件，形成循環(huán)事件。

3. 怎么實(shí)現(xiàn)環(huán)形（圓形）進(jìn)度條的自增長？

緊接著步驟1，元件載入（2號元件）設(shè)置文本框（5號元件）的文本為0；

旋轉(zhuǎn)右側(cè)半圓180度，勻速用時2000毫秒；

等待2000毫秒 旋轉(zhuǎn)左側(cè)半圓169.2度，用時1880毫秒。

說明a：旋轉(zhuǎn)左側(cè)半圓為什么169.2度，用時1880毫秒？

最終效果需要在百分比97%已經(jīng)對應(yīng)環(huán)形（圓形）進(jìn)度條97%的位置停止自增長。

360度對應(yīng)圓環(huán)100%，97%圓環(huán)對應(yīng)349.2度，右側(cè)半圓全部走完180度，左側(cè)半圓剩下349.2-180=169.2度。

4000毫秒對應(yīng)圓環(huán)100%，97%圓環(huán)對應(yīng)3880毫秒。右側(cè)半圓全部走完需要2000毫秒，3880-2000=1880毫秒。

詳解右側(cè)動態(tài)面板在轉(zhuǎn)動半圓中的結(jié)構(gòu)：

分解后的動態(tài)圖：

本文由 @東方夜明 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議