在進行原型制作的時候，經(jīng)常會遇到這樣一個交互：進度條。并且有時候進度條會自動“走動”到指定的位置，并且具有動態(tài)效果。

?

今天這個案例就是進度條。但是它是簡單的進度條嗎？NO！它是環(huán)形進度條，并且是具有動態(tài)效果的環(huán)形進度條。那么有些朋友會問說了，直線型的進度條我會做，但是環(huán)形的應(yīng)該怎么做呢？

?

問得好。接下來我們就一起來看看。

?

首先看看效果是如何的。打開頁面之后，進度條會從初始的位置慢慢“走動”到一個具體的位置，我們可以看到它“走動”的路徑。

大家可以打開預(yù)覽看看，直觀感受它的效果是如何的。https://ptmqpq.axshare.com

?

一、搭建頁面元素

諸如手機外殼之類的元素的搭建這里就不說了，不清楚的同學(xué)可以查看我們之前的文章，或者直接和我們交流。這里我們只看重點部分，也就是進度條的部分。

?

對于環(huán)形的圖形，大家有沒有概念要怎么做的？需要想到，我們可以利用圓形或者扇形或者二者結(jié)合使用。

?

這樣一說相信大家都有思路，知道應(yīng)該怎么畫這個環(huán)狀圖形了。給大家拆分看一下，案例中是怎么做的。

?

?

將三個圖形的圓心重疊在一起，灰色線條的扇形處于最下方，藍色扇形居中間，灰色圓形位于最上方，作為遮擋。這樣看起來就像是只有灰色和藍色的環(huán)狀圖形了。

?

?

之后根據(jù)自己的需要再加上文字。

?

?

會發(fā)現(xiàn)大概的雛形已經(jīng)出來了，但是跟我們的想法存在差別的是，我們需要的不是一個圓形的，而是一個半圓，并且初始狀態(tài)不應(yīng)該看到藍色的進度條。所以我們用矩形部件給予遮擋。

?

這樣就把重點的元素處理完成了。在這里有三個地方注意需要：

a.????進度條需要“走動”多少，是根據(jù)具體的進度來。案例中，滿分為100分，題中為65分，需要藍色到65%的位置?？梢詫⑺{色的扇形范圍制作為剛好到65%的。這樣在后面制作交互的時候，也可以帶來方便。當然，也可以做的范圍更大一些，在設(shè)置交互的時候注意一些參數(shù)的設(shè)置即可。

b.????記得保持進度條最初始的狀態(tài)是0，所以一定將藍色的扇形的位置放置好。

c.?????三個圖形圓心保持一致，需要重疊在一起。

?

二、設(shè)置交互

?

這里我們做的是不需操作，打開頁面即進行動態(tài)的交互。所以這里我們選擇的是頁面載入時事件。

?

怎么做這個設(shè)置呢？我們只需要將位于中間的藍色扇形從被遮擋的部分下旋轉(zhuǎn)出來，就能達到進度條在“走動“的效果。這也是我們剛才強調(diào)”圓心保持重疊“的原因。重疊了，在旋轉(zhuǎn)的時候可以不出現(xiàn)偏差。

?

知道了使用什么動作之后，再來看看，具體的設(shè)置。

?

?

（1）方向

根據(jù)我們的習慣，默認從左到右是增加的方向，所以我們采用順時針的方向。當然，如果你的圓形有特殊的要求和特殊的做法除外。

?

（2）角度

可能有朋友會比較疑惑，這個135度是怎么來的。還要從我們的進度條和整圓的關(guān)系說起。

?

前面提到了，藍色的扇形是根據(jù)65分的這個數(shù)值去進行制作的。在制作完成之后，將它完全遮擋起來，需要將它的初始圖形進行旋轉(zhuǎn)。剛好旋轉(zhuǎn)到225度的時候能夠完全被遮擋住。

?

?

因為它剛好是65分的范圍，所以當它還原成為0度的時候，剛好是我們所需要的范圍。如果你不是按照65分的大小去制作的這個扇形，那么在還原的角度上要做一下測試。

?

從225度，順時針旋轉(zhuǎn)到0度，剛好是旋轉(zhuǎn)了360-225=135度。這樣就得到了精準的角度。

?

（3）錨點

不用說，以圓心為軸進行旋轉(zhuǎn)，才能得到我餓們想要的這種效果，其他的點均會存在問題。大家有時間可以試試，不同的點作為旋轉(zhuǎn)的錨點，存在什么不同的效果。

?

?

（4）動畫

選擇了“線性“的原因是，可以看到旋轉(zhuǎn)的整個過程，也就實現(xiàn)了動態(tài)”走動“的這個效果。時間可以根據(jù)自己的需要進行調(diào)整，時間越短，動作越快，動態(tài)的過程越短；反之，時間越長，動作越慢，動態(tài)的過程越長。根據(jù)自己的是需求選擇動畫效果和時間。

?

這里跟大家展示了如何用axure制作這種具有動態(tài)效果的環(huán)形進度條，如果大家有其他的方法，或者哪里有疑惑，歡迎留言討論，也歡迎直接跟我們交流！