[原型设计]Axure8制作圆形旋转加载进度环和百分比效果

1、新建Axure RP文件，取名“Axure制作圆形旋转加载进度环和百分比效果”,效果图如下

2、拖入1个圆形控件，设置边框色，背景色都为蓝色，大小200px*200px。

3、拖入一个小圆形控件，设置边框色，背景色都为白色，大小150px*150px，与大圆圆心重合。

4、同时选中大圆和小圆，单击右键，Transform Shape——Substract，剪切得到空心环。

5、拖入一个矩形框，覆盖掉圆环右半部分。

6、同时选中矩形框和圆环，采取和步骤4一样的操作，得到左半边圆环。

7、复制半圆环，并旋转180度。将得到的两个半圆环复制一份，并将背景色设置为灰色。

选中半圆环，单击右键，选择Transform Shape——Flip Horizontal即可完成180度旋转。

分别为四个半圆环设置名字为左环、右环、左槽、右槽，并按照右槽、右环、左槽、左环的顺序设置放置层级。

拖入文本标签Label，取名“进度值”，初始值为0%。

拖入button，取名“开始”。

Ok，如下图，一切准备工作就绪。

8、把蓝色两个半圆连接在一起形成一个圆，灰色的也是，并将灰色的覆盖在蓝色之上。

9、思路

（1）根据四个半圆环拜访层级，右环（蓝色）以左边为中心顺时针旋转180度，此时右环旋转到左槽之上，显示半个蓝色环。

（2）此时设置左环（蓝色）到最上层，左半边仍然是蓝色的（注意设置时间必须等右环完全旋转180度后设置）。

（3）左环（蓝色）以右边为中心完成顺时针180度旋转。

10、由于进度值域需要不断刷新计算进度值，采取显示隐藏进度值域来实现循环刷新，设置进度值域为隐藏。

添加开始按钮Onclick事件。

（1）Show 进度值（以下图中为Show开始有误，不再重新截图）

（2）右环以左边线为中心旋转180度，5秒钟，线性。

（3）等待5秒

（4）把左环设置到最上层

（5）左环以右边线为中心旋转180度，5秒钟，线性。

11、旋转效果制作完成，接下来制作进度值显示效果。

设置进度值OnShow事件如下：

（1）wait 0ms，刷新进度值标签所用

（2）设置进度值

进度值=100*（左环旋转角度+右环旋转角度）/360（%）

（3）Hide 进度值

（4）Show进度值，通过隐藏、显示达到循环触发进度值OnShow事件的目的。

全部完成，F5查看效果。似乎边框处理不太好，原理即为如此。