博客概要
分享利用Axure的动态面板元件制作的一个粗糙的轮播~
Axure RP8-实战案例_总目录
文章超链接:https://blog.csdn.net/qq_41386332/article/details/109445644
轮播
![](https://i-blog.csdnimg.cn/blog_migrate/0bef67e818af8a17264938e655dd0dcf.jpeg)
解释 | 点击或以一定时间进行循环播放的效果 |
---|---|
效果 | 点击跳转循环 |
【PS】 | 1.本次制作,样式简洁,请按需,自行美化 2.有多种制作方式,此次至制作了其中之一,其余后续分享 |
… | … |
制作过程
1.整体搭建
![](https://i-blog.csdnimg.cn/blog_migrate/a1f4177cbe1db7193f6f9327e1d3a31f.jpeg)
利用“矩形”、“图片”等元件,整体搭建页面结构。
2.转化
![](https://i-blog.csdnimg.cn/blog_migrate/d333f6f58df158b2fdf0a890c96820cb.jpeg)
全选页面内容,鼠标右击,选择将其“转换为动态面板”(可以事先“成组”)。
3.创建面板
![](https://i-blog.csdnimg.cn/blog_migrate/ccc217518fad7c9740feab3582335844.jpeg)
转换为动态面板后,可发现页面区域明显变色,双击区域,出现“面板状态管理”弹窗,设置“动态面板名称”,新建相应轮播面板,双击选择面板,即可进入相应的面板进行编辑。
4.设置交互
![](https://i-blog.csdnimg.cn/blog_migrate/884f24a09447175faaaa4fb2aa489277.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/b79993e509285f3a22a4a09eb216f852.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/89eb086c3f7f76b4503b7eedc23a07a8.jpeg)
进入相应面板后,按步骤进行相应的交互设置:
- 选中要设置的“图片”元件
- 在属性一栏选择设置“交互”下的“鼠标单击时”的用例
- 选择“添加动作”一栏的“设置面板状态”
- 勾选“配置动作”中要设置状态的动态面板
- 在“选择状态”一栏,下拉选择“Next”
- 分别在“进入动画”和“退出动画”栏,选择向左话,并设置相应时间
- 点击“确定”,可以在“属性”的“交互”一栏中看到相应的变化
5.效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/ec872da0d8ca8f1a2d017e2a6da1d07c.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/2ef86fa93e350cb854ca0f2978950c8a.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/055658d6f501b596b0c03fc3cb47b4d2.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/ec872da0d8ca8f1a2d017e2a6da1d07c.jpeg)
点击图片即实现轮播跳转效果。
总结
以上= =“动态面板之轮播”技能点get~