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

发布于:2023-01-22 ⋅ 阅读:(11) ⋅ 点赞:(0) ⋅ 评论:(0)

效果图

 制作步骤

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


网站公告

欢迎关注微信公众号

今日签到

点亮在社区的每一天
签到