今天在網(wǎng)上看到了幾篇關(guān)于環(huán)形進度條的Axure教程，由于天性愚鈍，學了一整天才弄懂其原理，但是強迫癥的細胞告訴我網(wǎng)上的幾篇教程不太完美，于是我跳進了產(chǎn)品經(jīng)理最忌諱的坑——追求完美。

不只是進度條，很多模塊都有很多方法，勤于思考就能用不同的方法做出來，活學活用，共勉。

一、元件準備

如上圖所示：

1、尺寸為202*202圓形1個，并命名為“外環(huán)”；

2、尺寸為148*148圓形1個，并命名為“內(nèi)環(huán)”；

3、按鈕1個，命名為“開始”，作為觸發(fā)按鈕；

4、尺寸202*202大圓與152*152小圓組合而成的四分之一圓環(huán)1個，顏色填充為白色（圖中是為了顯示出來才臨時填充的灰色），組合命名為“白條”，ps：尺寸之所以和元件5不同是為了避免圓心疊加時露出紅色的邊；

5、尺寸為200*200大圓與150*150小圓組合而成的四分之一圓環(huán)4個，組合時大圓填充紅色，小圓填充白色，組合分別命名為“紅條1234”。

二、元件擺放位置

1、將“外環(huán)”置于最底層；

2、將“紅條1234”分別于“外環(huán)”圓心重合放置；

3、將“白條”與“外環(huán)”圓心重合放置，此時白條會遮擋住紅條，在元件準備時之所以讓白條尺寸略大于紅條尺寸，就是為了遮擋住紅條的邊緣顏色，實現(xiàn)完全遮擋，不留瑕疵；

4、將“內(nèi)環(huán)”與“外環(huán)”圓心重合放置；

5、最后將“開始”按鈕放置自己喜歡的位置。

如下圖所示：

三、添加用例

對“開始”按鈕做“鼠標單擊時”事件：

具體過程：

旋轉(zhuǎn)“紅條1”to 90度，漢化項是“到達”，順時針，線性，200ms→旋轉(zhuǎn)“紅條2”to 180度，順時針，線性，400ms→旋轉(zhuǎn)“紅條3”to 270度，順時針，線性，600ms→旋轉(zhuǎn)“紅條4”to 180度（注意：這個地方先旋轉(zhuǎn)180度與紅條2重合），順時針，線性，400ms→等待400ms→將“紅條4”置于頂層→將“內(nèi)環(huán)”置于頂層→旋轉(zhuǎn)“紅條4”by 180度，漢化項是“經(jīng)過”，線性，400ms→F5看一下效果吧。

四、難點解釋

1、四個紅條是如何旋轉(zhuǎn)的？

最初4個紅條是疊加在一起的，開始旋轉(zhuǎn)時其實4個紅條是同時旋轉(zhuǎn)的，只是4個紅條的最終位置不一樣，就像跑步，一聲槍響同時起跑，第一個人跑了1/4停下了，第二個人跑了2/4停下了，第三個人跑了3/4停下了，只有第四個人跑完了全程。同理，順時針90度是紅條1停下的位置，180度是紅條2停下的位置，270度是紅條3停下的位置，360度是紅條4停下的位置，但是為什么先讓紅條4旋轉(zhuǎn)到180度，中間停頓一下呢？下面解釋。

2、為什么先讓紅條4旋轉(zhuǎn)180度？

聰明的同學肯定已經(jīng)看出來了！如果讓紅條4直接旋轉(zhuǎn)到360度，那么它會被那個最初遮擋紅條的白條所遮擋，這樣紅條4旋轉(zhuǎn)360度就相當于做的無用功。所以，我們需要讓紅條4分兩步旋轉(zhuǎn)，中間停留一下讓其置于頂層，這樣到最終位置就不會被白條遮擋。

3、為什么最終又讓內(nèi)環(huán)置于頂層？

大家可以試試，不將內(nèi)環(huán)置于頂層有什么影響。PS.其實還是為了追求細節(jié)啦，哈哈哈….

4、時間上有什么關(guān)系？200ms、400ms、600ms、800ms有什么聯(lián)系？

其實這是從物理學上運動的過程考慮的，紅條1234旋轉(zhuǎn)的路程是一種倍數(shù)關(guān)系，如果想讓進度條實現(xiàn)均勻遞增，那么時間上也應該保持倍數(shù)關(guān)系。紅條4的完整運動時間其實是800ms，大家可以試一下調(diào)整時間做非勻速遞增的進度條，我沒有試哦。

5、為什么紅條4第一次旋轉(zhuǎn)用的“to”，第二次旋轉(zhuǎn)用的“by”？

其實這是個英語問題，到達那里用介詞“to”，經(jīng)過哪里用介詞“by”。紅條4第一次旋轉(zhuǎn)時，它的開始位置是0度那里，第二次旋轉(zhuǎn)時，如果選擇“to”會把第一次旋轉(zhuǎn)后的180度位置當成新的起點，這個地點相當于一個新的起點，如果還用“to”，就是在新起點的參照上到達一個固定位置。PS：其實本案例里這一步用“to”或“by”結(jié)果是一樣的，純屬巧合，但是道理是不一樣的，關(guān)于to和by的區(qū)別大家一定要弄懂。

五、Bug

進度條達到100%后，反復點擊“開始”按鈕看看有什么效果，我不會告訴你有bug哦….

相關(guān)閱讀：

Axure 8.0實例｜簡單實用的進度條

Axure教程——頁面載入進度條

Axure設計思考：Axure 7.0與Axure 8.0做進度條區(qū)別

關(guān)于Axure進度條制作的方法，這篇文章講得最全面！

本文由 @小黑狗兒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。