在進行原型製作的時候，經常會遇到這樣一個交互：進度條。並且有時候進度條會自動“走動”到指定的位置，並且具有動態效果。
今天這個案例就是進度條。但是它是簡單的進度條嗎？NO！它是環形進度條，並且是具有動態效果的環形進度條。那麼有些朋友會問說了，直線型的進度條我會做，但是環形的應該怎麼做呢？
問得好。接下來我們就一起來看看。
首先看看效果是如何的。打開頁面之後，進度條會從初始的位置慢慢“走動”到一個具體的位置，我們可以看到它“走動”的路徑。
大家可以打開預覽看看，直觀感受它的效果是如何的。https://ptmqpq.axshare.com
一、搭建頁面元素
諸如手機外殼之類的元素的搭建這裏就不說了，不清楚的同學可以查看我們之前的文章，或者直接和我們交流。這裏我們只看重點部分，也就是進度條的部分。
對於環形的圖形，大家有沒有概念要怎麼做的？需要想到，我們可以利用圓形或者扇形或者二者結合使用。
這樣一說相信大家都有思路，知道應該怎麼畫這個環狀圖形了。給大家拆分看一下，案例中是怎麼做的。
將三個圖形的圓心重疊在一起，灰色線條的扇形處於最下方，藍色扇形居中間，灰色圓形位於最上方，作爲遮擋。這樣看起來就像是隻有灰色和藍色的環狀圖形了。
之後根據自己的需要再加上文字。
會發現大概的雛形已經出來了，但是跟我們的想法存在差別的是，我們需要的不是一個圓形的，而是一個半圓，並且初始狀態不應該看到藍色的進度條。所以我們用矩形部件給予遮擋。
這樣就把重點的元素處理完成了。在這裏有三個地方注意需要：
a. 進度條需要“走動”多少，是根據具體的進度來。案例中，滿分爲100分，題中爲65分，需要藍色到65%的位置。可以將藍色的扇形範圍製作爲剛好到65%的。這樣在後面製作交互的時候，也可以帶來方便。當然，也可以做的範圍更大一些，在設置交互的時候注意一些參數的設置即可。
b. 記得保持進度條最初始的狀態是0，所以一定將藍色的扇形的位置放置好。
c. 三個圖形圓心保持一致，需要重疊在一起。
二、設置交互
這裏我們做的是不需操作，打開頁面即進行動態的交互。所以這裏我們選擇的是頁面載入時事件。
怎麼做這個設置呢？我們只需要將位於中間的藍色扇形從被遮擋的部分下旋轉出來，就能達到進度條在“走動“的效果。這也是我們剛纔強調”圓心保持重疊“的原因。重疊了，在旋轉的時候可以不出現偏差。
知道了使用什麼動作之後，再來看看，具體的設置。
（1）方向
根據我們的習慣，默認從左到右是增加的方向，所以我們採用順時針的方向。當然，如果你的圓形有特殊的要求和特殊的做法除外。
（2）角度
可能有朋友會比較疑惑，這個135度是怎麼來的。還要從我們的進度條和整圓的關係說起。
前面提到了，藍色的扇形是根據65分的這個數值去進行製作的。在製作完成之後，將它完全遮擋起來，需要將它的初始圖形進行旋轉。剛好旋轉到225度的時候能夠完全被遮擋住。
因爲它剛好是65分的範圍，所以當它還原成爲0度的時候，剛好是我們所需要的範圍。如果你不是按照65分的大小去製作的這個扇形，那麼在還原的角度上要做一下測試。
從225度，順時針旋轉到0度，剛好是旋轉了360-225=135度。這樣就得到了精準的角度。
（3）錨點
不用說，以圓心爲軸進行旋轉，才能得到我餓們想要的這種效果，其他的點均會存在問題。大家有時間可以試試，不同的點作爲旋轉的錨點，存在什麼不同的效果。
（4）動畫
選擇了“線性“的原因是，可以看到旋轉的整個過程，也就實現了動態”走動“的這個效果。時間可以根據自己的需要進行調整，時間越短，動作越快，動態的過程越短；反之，時間越長，動作越慢，動態的過程越長。根據自己的是需求選擇動畫效果和時間。
這裏跟大家展示瞭如何用axure製作這種具有動態效果的環形進度條，如果大家有其他的方法，或者哪裏有疑惑，歡迎留言討論，也歡迎直接跟我們交流！