《Axure制作显示进度的横向滑块操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,元件,动态面板,滑动等多维度案例或实操来进行更多的学习;此教程是由ilovekgtmac在2021-07-05发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
随着axure软件的升级,一个简单的现实进度的横向滑块,不需要多复杂的交互,即可轻松实现,也特别适合新手上手Axure这个软件,用Axure制作显示进度的横向滑块有兴趣的一起看下吧!
构成元件就三个。
1、一个背景(矩形,宽600,高30,圆角半径15)命名为beijing.
2、一个进度条(复制背景,设置背景颜色为蓝色,宽度设置为30)命名为jindu。
3、一个圆形。将圆形转换成动态面板。命名为yuanquan.
黄老师的命名规则就是这么简单粗暴。
为了方便理解,进度条是靠着Y轴的,这样可以少考虑一个参数。
拖动圆形(动态面板)的时候,添加三个交互:
1、移动当前元件,水平拖动。设置拖动边界,左侧大于等于0,右侧小于等于背景的长度。
这一步是让这个圆圈在背景条上可以拖动起来。
2、设置进度条的尺寸,宽度为:[[yuanquan.x+yuanquan.width]],注意要添加局部变量yuanquan指的是动态面板圆圈。锚点在左侧。
这一步是让进度条跟着动起来。
3.设置圆形上的元件文字=[[Math.floor((jindu.width-30)*100/570)]],注意添加局部变量。
这个是设置圆形上的文字。公式计算的是当前位置的百分比。由于本身有30宽,所以计算百分比的时候分子分母都需要减去30。不然就不是从零开始的了。Math.floor()是向下取整,也就是把小数点后面的数字抹掉,不然算出来会有长尾巴。
这样就做完了,新手要注意一下三个元件的层级顺序,圆圈在最上面,进度在中间,背景在最底下。在概要面板里面可以拖动调整元件的层级。
以上就是Axure制作显示进度的横向滑块操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure制作移动端菜单顶部吸附效果教程
2022-05-30 10:27
2022-04-13 10:06
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论