《Axure 用中继器做排名图操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,文本框,文本标签等多维度案例或实操来进行更多的学习;此教程是由芷Chi在2021-08-26发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
本文将教大家如何在axure用中继器做一个排名图,达到填写中继器数据,自动生成图标的目的。
(1)中继器里有两列,x和no,x为中坐标,no为具体数值如下图所示:
(2)中继器内材料:文本框+矩形1,如下图所示放置即可:
(3)在中继器外建一个文本框(命名为最大值)并隐藏,只用于逻辑处理。文本框的值填写no里面最大的值,该案例为920。逻辑是找到最长的矩形的值,让比它短的矩形值调低宽度。具体公式[[LVAR2.width*(Item.no/LVAR1)]]。
LVAR2.width指矩形的宽,LVAR1指no的最大值,Item.no指no的当前值。
(4)具体交互
中继器每项加载时,是设置中继器内的文本框的文字=[[Item.x]]设置矩形的尺寸[[LVAR2.width*(Item.no/LVAR1)]],锚点在左部。
(5)用矩形和标签制作外框并标上刻度,如下图所示:
将中继器移动到对应位置上即可。
(6)做一个标签,如下图所示,默认隐藏,透明度75%。
思路,鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Item.no的值=文本标签2,Item.x的值=文本标签1。
鼠标移出的时候,隐藏标签即可。
这样制作完成了排名图,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。
以上就是Axure 用中继器做排名图操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure教程:中继器实现多角色权限控制
2022-06-30 10:13
2022-06-01 13:33
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论