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

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

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

效果图

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

效果图

作者 shuytu

关键字:产品经理, Axure, 进度

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部