《Axure制作左右设限滑块页眉菜单栏操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,菜单栏组件,文本链接等多维度案例或实操来进行更多的学习;此教程是由Bibbidi-bobbidi-boo在2021-08-20发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
本文要跟大家讲的是,Axure如何制作左右设限滑块页眉菜单栏,一起来看看~
1.1.1页面设定
在【左右设限滑块页眉菜单栏】内新建命名为【【左右设限滑块页眉菜单栏】的动态面板,动态面板的【State1】更改为【全部】,在【全部】内新建一个命名为【右浮图标】的【组合文件】和一个命名为【切换菜单】的【动态面板】,【切换菜单】内的【State1】更改【文本】。
1.1.1.1【右浮图标】
从元件库内分别拉入两个【矩形】元件分别做图标的图标背景1和图标背景2。
图标背景1的【填充】色为#ffffff,透明度为30%,图标背景2的【填充】色为#ffffff,透明度为90%,切图标背景2的X大于图标背景2X的8px,然后将图标嵌入图标背景1和图标背景2两者形成的半透明上下左右居中区域。
1.1.1.2【切换菜单】
从元件库内分别拉入14个【文本标签】元件依次在切换菜单规定的区域范围内排序成行,并依次将内容更改为1至14的数字。
【文本标签】的【填充】色皆为透明,字体颜色#666666。
1.2动态交互
1.2.1效果设计
1.2.1.1图标交互样式设置
选中【图标】,进行【交互样式设置】,将鼠标悬停、鼠标按下、选中的交互样式的另一种状态的【图片】导入。
1.2.1.2文本标签的交互样式设置
选中表现1至14个数字的【文本标签】元件,进行【交互样式设置】,将鼠标悬停、鼠标按下、选中的交互样式的【字体颜色】进行设置。
1.2.2.1实现左右设限滑块页眉菜单栏的动态交互
选中【左右设限滑块页眉菜单栏】动态面板内的【全部】,在【属性】中设定【向左拖动结束时】和【向右拖动结束时】的用例,配置相关的动作。
步骤一:设置【向左拖动结束时】用例的配置动作
在case1【组织动作】中添加【移动】动作,在【配置动作】内勾选【切换菜单】动态面板,设置【移动】为【经过】状态,x=-150,y=y,【动画】为【缓进缓出】,时间t=2000毫秒,【界限】中添加【左侧】边界,且大于等于-338。
步骤二:设置【向右拖动结束时】用例的配置动作
在case1【组织动作】中添加【移动】动作,在【配置动作】内勾选【切换菜单】动态面板,设置【移动】为【经过】状态,x=-200,y=y,【动画】为【缓进缓出】,时间t=2000毫秒,【界限】中添加【左侧】边界,且小于等于0。
1.3预览效果
以上就是Axure制作左右设限滑块页眉菜单栏操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure教程:跟随鼠标方向的面板滑动动画
2022-06-20 16:57
2022-05-16 10:13
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论