Axure製作圓形進度條?

進度條是製作原型時常用的元件，圓形進度條更是在載入中常見的，我們使用矩形的變換和旋轉來實現：

工具/原料

axure8.0 beta版

方法/步驟

使用矩形元件進行變形，變化為一個半圓：

具體方式詳見圖片1，然後設定其大小100、50； 圓角50，邊框最粗，顏色：綠色，效果如下圖：

畫出一個半圓？有了半圓然後在旋轉，是不是有了進度條的基礎。

對半圓進行命名：半圓A,然後設定頁面載入時互動用例，

一定按照下圖設定：旋轉（經過），角度（180），方向（順時針），錨點（底部），動畫（線性），時間（5000ms）

第二部完成後，我們可以預覽一下，是不是我們要的效果，為了更加形象，我們拉出一個矩形（設定底部對齊，命名為：矩形），檢視效果：

根據前三步，我們完成了一個圓形進度條的核心部分，下面我們來繼續製作：

將半圓A複製一個，並命名為：半圓B,位置按照下圖所示：讓兩個半圓剛好組合為一個圓（便於效果演示）

設定：遮擋與半圓A,底部對齊，遮擋：無邊框

設定：半圓B 隱藏

設定互動示例：

點選：半圓A，新增：等待事件，設定等待時間為5000ms,然後新增顯示/隱藏事件：隱藏遮擋

這樣當半圓A旋轉完成時，我們讓遮擋隱藏，讓半圓B顯示，且開始旋轉，就可以接著A的旋轉繼續.

按照第六步思路，新增遮擋 隱藏時 互動用例，設定半圓B顯示，並旋轉:錨點（頂部）

到此，我們設定完成，按下F5,進行預覽，效果圖如下：

注意事項

對矩形進行變形為半圓