Axure实现动态进度条效果

5 评论 5528 浏览 9 收藏 6 分钟

编辑导读:动态进度条是产品的一个基础功能,如何用Axure实现动态进度条效果?本文作者对此进行了分析,希望对你有帮助。

界面原型想要用动态进度条,原本想在网上找一个现成的用,没想到都是坑,索性自己做了一个,分享给大家(附详细步骤)。

一、不带动文字的进度条

①创建矩形,命名“bg”,作为进度条的整体背景,设置width=600,hight=20,圆角=4,背景色“#f2f2f2”,如下图:

②复制上一个矩形,重命名为“pro”,作为进度条,设置背景色为“#57C188”,width=1,hight保持一致即可,并使两个矩形首端对齐,如下图:

③添加事件交互,选择“pro”矩形,设置矩形载入设原件尺寸,点击宽度fx,添加“bg”为局部变量,设置宽度为[[bg.width],高度不变,如下图:

④设置锚点“左侧、上下居中”,动画为“线性”,事件“3000”毫秒,确定,如下图:

⑤确定后预览看效果。

二、含动态文字的进度条

①创建矩形,命名“bg”,作为进度条的整体背景,设置width=600,hight=20,圆角=4,背景色“#f2f2f2”,如下图:

②复制上一个矩形,重命名为“pro”,作为进度条,设置背景色为“#57C188”,width此处可以随便设置(后边需要在载入时设置一个初始尺寸),hight保持一致即可,如下图:

③添加文本标签,命名“per”,显示百分比,设置字号“18”,并对齐,如下图:

④选中矩形“pro”添加“载入时”交互事件,选“设置原件尺寸”,创建进度条“pro”的初始尺寸,如下图:

点击宽度fx,添加背景“bg”为局部变量,设置进度条初始尺寸为[[bg,width/100]],进度条背景的1%;

⑤继续为矩形“pro”添加交互事件“尺寸改变时”,设置矩形“pro”的宽度为[[This.with+bg.width/100]],此处依然需要添加背景“bg”为局部变量,如下图:

该设置是为了,进度条每次增加1%的长度,继续设置锚点为“左侧、上下居中”,动画为“线性”,时间为“50”毫秒(此处时间决定进度条的快慢),如下图:

⑥设置文本标签“per”的显示文字,如下图:

设置文本标签文字为[[Math.floor(This.width/bg.width*100)+1]]%,Math.floor()为取整函数。

⑦设置动态显示,“启用情形”,当This.width< LVAR1.width时(添加元件bg为局部变量“LVAR1”),执行“尺寸改变时”的交互事件,如下图:

⑧预览看效果,搞定!!!

在线预览地址:https://s2d9ly.axshare.com/#id=bix75t&p=%E8%BF%9B%E5%BA%A6%E6%9D%A1

 

本文由 @Soul Eater 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
3人打赏
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 我的进度条是倒着走的

    来自四川 回复
  2. 完全不行

    来自广东 回复
    1. 按照上边的步骤来做,肯定是没问题的,再试试

      来自河南 回复
    2. 带动态文字的的确不行,没反应

      来自湖北 回复
    3. 已成功,是可以的,感谢

      来自湖北 回复