制作原型時(shí)，經(jīng)常會遇到這種交互，即進(jìn)度條。

并且有時(shí)候進(jìn)度條會自動(dòng)“走動(dòng)”到指定的位置，并且具有動(dòng)態(tài)效果。

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

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

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

大家可以打開預(yù)覽看看，直觀感受它的效果是如何的。

一、搭建頁面元素

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

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

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

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

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

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

這樣就把重點(diǎn)的元素處理完成了。在這里有三個(gè)地方注意需要：

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

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

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

二、設(shè)置交互

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

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

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

（1）方向

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

（2）角度

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

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

因?yàn)樗鼊偤檬?5分的范圍，所以當(dāng)它還原成為0度的時(shí)候，剛好是我們所需要的范圍。如果你不是按照65分的大小去制作的這個(gè)扇形，那么在還原的角度上要做一下測試。

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

（3）錨點(diǎn)

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

（4）動(dòng)畫

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

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