今天在網上看到了幾篇關於環形進度條的Axure教程，由於天性愚鈍，學了一整天才弄懂其原理，但是強迫症的細胞告訴我網上的幾篇教程不太完美，於是我跳進了產品經理最忌諱的坑——追求完美。
不只是進度條，很多模組都有很多方法，勤于思考就能用不同的方法做出來，活學活用，共勉。
一、元件準備
如上圖所示：
1、尺寸為202*202圓形1個，並命名為“外環”；
2、尺寸為148*148圓形1個，並命名為“內環”；
4、尺寸202*202大圓與152*152小圓組合而成的四分之一圓環1個，顏色填充為白色（圖中是為了顯示出來才臨時填充的灰色），組合命名為“白條”，ps：尺寸之所以和元件5不同是為了避免圓心疊加時露出紅色的邊；
5、尺寸為200*200大圓與150*150小圓組合而成的四分之一圓環4個，組合時大圓填充紅色，小圓填充白色，組合分別命名為“紅條1234”。
二、元件擺放位置
1、將“外環”置於最底層；
2、將“紅條1234”分別於“外環”圓心重合放置；
3、將“白條”與“外環”圓心重合放置，此時白條會遮擋住紅條，在元件準備時之所以讓白條尺寸略大於紅條尺寸，就是為了遮擋住紅條的邊緣顏色，實現完全遮擋，不留瑕疵；
4、將“內環”與“外環”圓心重合放置；
如下圖所示：
三、新增用例
具體過程：
旋轉“紅條1”to 90度，漢化項是“到達”，順時針，線性，200ms→旋轉“紅條2”to 180度，順時針，線性，400ms→旋轉“紅條3”to 270度，順時針，線性，600ms→旋轉“紅條4”to 180度（注意：這個地方先旋轉180度與紅條2重合），順時針，線性，400ms→等待400ms→將“紅條4”置於頂層→將“內環”置於頂層→旋轉“紅條4”by 180度，漢化項是“經過”，線性，400ms→F5看一下效果吧。
四、難點解釋
1、四個紅條是如何旋轉的？
最初4個紅條是疊加在一起的，開始旋轉時其實4個紅條是同時旋轉的，只是4個紅條的最終位置不一樣，就像跑步，一聲槍響同時起跑，第一個人跑了1/4停下了，第二個人跑了2/4停下了，第三個人跑了3/4停下了，只有第四個人跑完了全程。同理，順時針90度是紅條1停下的位置，180度是紅條2停下的位置，270度是紅條3停下的位置，360度是紅條4停下的位置，但是為什麼先讓紅條4旋轉到180度，中間停頓一下呢？下面解釋。
2、為什麼先讓紅條4旋轉180度？
聰明的同學肯定已經看出來了！如果讓紅條4直接旋轉到360度，那麼它會被那個最初遮擋紅條的白條所遮擋，這樣紅條4旋轉360度就相當於做的無用功。所以，我們需要讓紅條4分兩步旋轉，中間停留一下讓其置於頂層，這樣到最終位置就不會被白條遮擋。
3、為什麼最終又讓內環置於頂層？
大家可以試試，不將內環置於頂層有什麼影響。PS.其實還是為了追求細節啦，哈哈哈….
4、時間上有什麼關係？200ms、400ms、600ms、800ms有什麼聯絡？
其實這是從物理學上運動的過程考慮的，紅條1234旋轉的路程是一種倍數關係，如果想讓進度條實現均勻遞增，那麼時間上也應該保持倍數關係。紅條4的完整運動時間其實是800ms，大家可以試一下調整時間做非勻速遞增的進度條，我沒有試哦。
5、為什麼紅條4第一次旋轉用的“to”，第二次旋轉用的“by”？
其實這是個英語問題，到達那裡用介詞“to”，經過哪裡用介詞“by”。紅條4第一次旋轉時，它的開始位置是0度那裡，第二次旋轉時，如果選擇“to”會把第一次旋轉後的180度位置當成新的起點，這個地點相當於一個新的起點，如果還用“to”，就是在新起點的參照上到達一個固定位置。PS：其實本案例裡這一步用“to”或“by”結果是一樣的，純屬巧合，但是道理是不一樣的，關於to和by的區別大家一定要弄懂。
五、Bug
今天在網上看到了幾篇關於環形進度條的Axure教程，由於天性愚鈍，學了一整天才弄懂其原理，但是強迫症的細胞告訴我網上的幾篇教程不太完美，於是我跳進了產品經理最忌諱的坑——追求完美。
不只是進度條，很多模組都有很多方法，勤于思考就能用不同的方法做出來，活學活用，共勉。
一、元件準備
如上圖所示：
1、尺寸為202*202圓形1個，並命名為“外環”；
2、尺寸為148*148圓形1個，並命名為“內環”；
4、尺寸202*202大圓與152*152小圓組合而成的四分之一圓環1個，顏色填充為白色（圖中是為了顯示出來才臨時填充的灰色），組合命名為“白條”，ps：尺寸之所以和元件5不同是為了避免圓心疊加時露出紅色的邊；
5、尺寸為200*200大圓與150*150小圓組合而成的四分之一圓環4個，組合時大圓填充紅色，小圓填充白色，組合分別命名為“紅條1234”。
二、元件擺放位置
1、將“外環”置於最底層；
2、將“紅條1234”分別於“外環”圓心重合放置；
3、將“白條”與“外環”圓心重合放置，此時白條會遮擋住紅條，在元件準備時之所以讓白條尺寸略大於紅條尺寸，就是為了遮擋住紅條的邊緣顏色，實現完全遮擋，不留瑕疵；
4、將“內環”與“外環”圓心重合放置；
如下圖所示：
三、新增用例
具體過程：
旋轉“紅條1”to 90度，漢化項是“到達”，順時針，線性，200ms→旋轉“紅條2”to 180度，順時針，線性，400ms→旋轉“紅條3”to 270度，順時針，線性，600ms→旋轉“紅條4”to 180度（注意：這個地方先旋轉180度與紅條2重合），順時針，線性，400ms→等待400ms→將“紅條4”置於頂層→將“內環”置於頂層→旋轉“紅條4”by 180度，漢化項是“經過”，線性，400ms→F5看一下效果吧。
四、難點解釋
1、四個紅條是如何旋轉的？
最初4個紅條是疊加在一起的，開始旋轉時其實4個紅條是同時旋轉的，只是4個紅條的最終位置不一樣，就像跑步，一聲槍響同時起跑，第一個人跑了1/4停下了，第二個人跑了2/4停下了，第三個人跑了3/4停下了，只有第四個人跑完了全程。同理，順時針90度是紅條1停下的位置，180度是紅條2停下的位置，270度是紅條3停下的位置，360度是紅條4停下的位置，但是為什麼先讓紅條4旋轉到180度，中間停頓一下呢？下面解釋。
2、為什麼先讓紅條4旋轉180度？
聰明的同學肯定已經看出來了！如果讓紅條4直接旋轉到360度，那麼它會被那個最初遮擋紅條的白條所遮擋，這樣紅條4旋轉360度就相當於做的無用功。所以，我們需要讓紅條4分兩步旋轉，中間停留一下讓其置於頂層，這樣到最終位置就不會被白條遮擋。
3、為什麼最終又讓內環置於頂層？
大家可以試試，不將內環置於頂層有什麼影響。PS.其實還是為了追求細節啦，哈哈哈….
4、時間上有什麼關係？200ms、400ms、600ms、800ms有什麼聯絡？
其實這是從物理學上運動的過程考慮的，紅條1234旋轉的路程是一種倍數關係，如果想讓進度條實現均勻遞增，那麼時間上也應該保持倍數關係。紅條4的完整運動時間其實是800ms，大家可以試一下調整時間做非勻速遞增的進度條，我沒有試哦。
5、為什麼紅條4第一次旋轉用的“to”，第二次旋轉用的“by”？
其實這是個英語問題，到達那裡用介詞“to”，經過哪裡用介詞“by”。紅條4第一次旋轉時，它的開始位置是0度那裡，第二次旋轉時，如果選擇“to”會把第一次旋轉後的180度位置當成新的起點，這個地點相當於一個新的起點，如果還用“to”，就是在新起點的參照上到達一個固定位置。PS：其實本案例裡這一步用“to”或“by”結果是一樣的，純屬巧合，但是道理是不一樣的，關於to和by的區別大家一定要弄懂。
五、Bug