Axure RP9 制作圆环动态加载进度条_axure加载圆圈组件

效果图

 制作步骤

1、制作圆环

1.1 首先，拖两个圆，按照下图设置圆的长、宽。

 1.2 、将两个圆，按照中心对齐，选中两个圆，点击“去除”选项，得到圆环

 2、制作半圆环

2.1 、拖一个长方体，设置长宽如下 85*170

2.2、将圆环与长发体，居左，居上对齐，然后取两者相交部分，得到 半圆，操作如下图。

3、对半圆环复制四份，分别命名为进度1，底色1，进度2，底色2。

3.1、半圆环的层级顺序，从下到上为 进度1，底色1，进度2，底色2

3.2 、进度1、进度2 半圆环设置为蓝色；底色1、底色2 半圆环设置为灰色。

4、对半圆环进行排版，调整位置

4.1 、设置进度2 为隐藏状态，设置底色2旋转180度

4.2、将进度1，底色1，进度2 按照居左，居上对齐。

4.3、将底色2放置在有半侧，组成一个圆。

4.4、选中全部的半圆，转换为动态面板“进度条”

5、给|“进度条”动态面板添加点击事件

5.1、首先，将“底色1”按顺时针，旋转180度，具体设置参数如下图所示。

5.2、然后，等待“底色1”旋转结束后，将“进度2”设置为显示，将“底色2”设置为隐藏，

同时将“进度2”按顺时针方向，旋转180度。具体参数设置如下图

5.3、再次将“底色1”按顺时针，旋转180度，具体设置参数如下图所示。

 6、添加进度数值显示

6.1、首先拖两个面板，用来显示百分比的数值和百分号，如下图。百分比数值默认为0

 6.2、给“百分比数值”添加显示时事件

     （1）、添加条件，“百分比数值”的数字小于100

     （2）等待20ms后，触发“百分比数值”的隐藏时事件。注，等待的时长，依据“底色1”旋转的时间来计算，“底色1”共旋转了2000ms，2000/100=20ms.

 6.2、给“百分比数值”添加隐藏时事件

   （1）、 设置“百分比数值”的数值+1

   （2）、触发“百分比数值”的显示时事件。

 6.3、添加触发进度值变化的事件

   （1）、将“百分比数值”，“百分号”设为隐藏。

   （2）、在动态面板“进度条”的单击事件中，添加显示“百分比数值”，“百分号”的实际，如下图。

资源下载地址：圆环进度条动态加载源文件https://download.csdn.net/download/shandongmike/86398217?spm=1001.2014.3001.5503