[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

时间:2024-03-20 11:22:39

Axure 8一学就会制作页面加载进度条百分比效果

1、新建文件,取名“进度条百分比效果”。效果图如下

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果
效果图

2、拖入矩形框,取名“进度槽”,300px*20px,背景浅灰色。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

3、拖入矩形框,取名“进度条”,1px*20px,背景深灰色。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

4、拖入文本标签,取名“进度值”,初始值0%,设置隐藏。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

选中进度值,右键选择Set Hidden

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

5、拖入按钮,取名“开始”。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

6、设置start按钮Onclick鼠标单击事件,点击start,将进度值控件设置为Show(用于触发进度值控件自动刷新),设置进度条增长至喝进度槽一样宽度。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

其中宽度取进度槽的宽度值。通过点击fx进行公式编辑,将进度槽控件设置为局部变量,以LVAR1.width表示进度槽宽度。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

7、设置进度值的OnShow事件,对进度条增长过程不断刷新,并计算每一次刷新时进度条长度与进度槽之比即为进度。

(1)Wait 0ms用于刷新操作。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

(2)设置进度值为进度条/进度槽,以百分号表示,取整,通过fx进行编辑。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

(3)设置进度值控件隐藏

(4)设置进度值控件显示,再次激发进度值OnShow事件,往复循环。

8、设置OnShow循环条件,双击Case1,设置进度条长度小于进度槽长度的情况下,通过执行OnShow事件循环刷新进度值。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

通过fx函数分别取进度条和进度槽的宽度。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果
[原型设计]Axure 8一学就会制作页面加载进度条百分比效果

大功告成,F5预览查看效果。

[原型设计]Axure 8一学就会制作页面加载进度条百分比效果