Axure RP9 制作圆环动态加载进度条

效果图

Axure RP9 制作圆环动态加载进度条_第1张图片

 制作步骤

1、制作圆环

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

Axure RP9 制作圆环动态加载进度条_第2张图片

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

Axure RP9 制作圆环动态加载进度条_第3张图片

 2、制作半圆环

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

Axure RP9 制作圆环动态加载进度条_第4张图片

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

Axure RP9 制作圆环动态加载进度条_第5张图片

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

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

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

Axure RP9 制作圆环动态加载进度条_第6张图片

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

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

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

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

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

Axure RP9 制作圆环动态加载进度条_第7张图片

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

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

Axure RP9 制作圆环动态加载进度条_第8张图片

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

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

Axure RP9 制作圆环动态加载进度条_第9张图片

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

Axure RP9 制作圆环动态加载进度条_第10张图片

 6、添加进度数值显示

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

Axure RP9 制作圆环动态加载进度条_第11张图片

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

     (1)、添加条件,“百分比数值”的数字小于100

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

Axure RP9 制作圆环动态加载进度条_第12张图片

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

   (1)、 设置“百分比数值”的数值+1

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

Axure RP9 制作圆环动态加载进度条_第13张图片

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

   (1)、将“百分比数值”,“百分号”设为隐藏。

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

Axure RP9 制作圆环动态加载进度条_第14张图片

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

你可能感兴趣的:(axure,rp9,axure,交互,经验分享)