[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果

1、新建Axure RP项目,取名“Axure最简单方式制作页面加载进度条百分比效果”

2、先看效果图

[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果
Axure 8制作的页面加载进度条百分比效果

3、拖入一个矩形框,背景色设置为浅灰色,大小为300px*20px,作为进度槽。再拖入一个矩形框,背景设置为深灰色,大小为1px*20px,作为进度条。通过逐渐增大进度条来实现进度条在进度槽上的变化,加载完成率百分比则为:进度条宽度/进度槽宽度。分别取名进度值和百分号。设置进度值为隐藏。通过隐藏、显示进度值控件来实现循环刷新进度值。

[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果
组件

4、设置OnPageLoad事件,Show 进度值,此动作激发进度值的OnShow事件。

[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果
OnPageLoad事件

5、设置进度值OnShow事件。

(1)先Wait 0ms,此设置用于刷新。

(2)设置进度条大小,每次循环进度条宽度增加进度槽宽度的百分之一。

(3)设置进度值,进度值为100*进度条宽度/进度槽宽度,去除小数点,采用math.floor函数。

(4)设置进度值隐藏。

[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果
[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果
[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果

6、为循环执行此刷新数据操作,在进度值Hide状态时添加OnHide事件,显示进度值。

[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果

结束,F5预览即可得进度条及进度值百分比效果。

[原型设计]Axure 8最简单方式制作页面加载进度条百分比效果