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