加载百分比_Axure利用动态面板实现环形加载进度条

先来看下效果。

基本原理

上面是组合效果，主要包含三个部分，左半圆、右半圆和中间的百分加载部分。左、右半圆的实现原理很简单，就是利用动态面板的遮挡功能，将一个完整的圆遮挡一半，然后在显示的那一半上面添加一个不透明的矩形框，然后旋转矩形框，将下面的圆显露出来，同时矩形框逐渐进入动态面板被遮挡的区域，从而逐渐消失，在下图中把矩形框设置成了半透明的浅色，我们可以很清楚的明白其原理。

中间的百分加载部分就是利用动态面板制作的定时器，定时改变元件中的文字实现的，关于动态面板定时器的基本设置，可以参见

下面是具体的实现步骤：

1、拖入一个动态面板，将尺寸设置为宽100，高200（按需调整，刚好是正方形的一半），并命名为左半圆。然后在面板中添加两个圆，一个200x200的底圆，设置背景色并去掉边框，一个白色的内圆，去掉边框（当然，样式可以自定义），将两个圆组合在一起，然后将左边与动态面板的左边沿对齐。完成编辑后就可以得到下面右图所示的半圆。

2、再次打开左半圆，在显示区添加一个220x110的矩形框，尺寸比面板尺寸稍大即可，这样可以保证后面旋转过程中能完全遮挡住底部的圆。去掉边框，将矩形框右边沿与动态面板的右边沿对齐，上下居中对齐。完成后得到下图所示的左半圆，此时看不到底部的圆。

3、复制左半圆，命名为右半圆，将上面的左边沿对齐改为右边沿对齐，得到右半圆，拖动元件，将左半圆和右半圆拼接在一起。

4、点击右半圆，为里面的矩形框添加交互动作，选择载入时（也可选择其它触发事件），执行旋转动作，分别设置旋转角度、执行事件、动画和旋转中点，旋转中点为左边的中点。这样可以完成右半圆的动画。

5、左半圆要等到右半圆动画执行完毕后再执行，因此我们要添加2000ms的等待时间，然后再将左半圆中的矩形框进行旋转，设置和右半圆一样，只是旋转中点改为右边中点。

6、最后添加进度指示文字，拖入一个200x200的矩形框，底色设置为透明色，去掉边框，初始文字为0%。

7、为了动态改变文字，我们要加入一个动态面板做的定时器。状态改变时设置进度的文本。由于文本中含有“%”符号，因此不能直接做数学运算，我们通过slice函数将%以前的字符串截取出来，然后再加1，再与%组合。当文本变为100%时，应停止改变文本，因此增加了情形1，当进度的文本不等于100%的时候才执行设置文本的动作。

8、最后我们要在右半圆的矩形载入中设置定时器的面板状态，循环间隔为40ms（完整的加载事件为4000ms，除以100）。

通过以上步骤即可完成环形进度的制作，我们可以将载入时触发改为通过按钮触发。也可以控制左半圆中矩形旋转的角度实现非百分百的加载。