Axure动态面板实现banner的轮播效果

Axure动态面板实现banner的轮播效果

一般我们在逛淘宝的时候,首页会有很多图片来回播放,那就是轮播图,如果我们想要实现这个效果难不难?当然不难,Axure就可以帮助你。Axure是一款强大的原型设计软件,而且不需要你懂编码你就可以制作高逼真的网页模型。

1. 首先绘制一个总位置线框图,如下图所示,使3个banner旋转效果

Axure大框图

2.banner位置占位符转换为动态面板(鼠标右键,转换的动态面板),,在右边的面板区域找到动态面板(横幅在主页的图),选择、添加2个,分别banner2 banner3。

双击状态名进入相应的面板页面,您将看到一个蓝色框。盒子里面的零件会显示在面板上,盒子外面的零件不会显示。您可以更改州名(选择州名,然后单击州名进行修改,图中的州名更改为1,2,3,对应于哪个banner)

Axure修改状态

3.添加banner轮播时,banner上面的状态按钮(图中的圆点,会跟随banner切换,颜色变化),添加矩形部件,右键选择形状,然后选择椭圆,然后在工具栏里修改椭圆的宽和高,变成一个圆(w:10,h:10),复制部件2次,在右侧部件名称和注释处给3个圆点分别命名圆点1,2,3

Axure选择形状

1. 准备工作差不多完成了,现在开始动态搭配效果。首先是banner要设置成自动轮播的。这要肿么设置呢?先给面板加动态效果:选中面板,在右侧交互栏的“显示”一项下添加用例,杂项里选择等待2秒(用来展示banner,时间长短自行设置),然后在动态面板下选择”设置面板状态“,选择状态“下一步”,设置进入退出动画“向左滑动”,动作时间设置为500毫秒。重复“等待”,”设置面板状态”两次。

注意:banner轮播到第三张时,下一张连接第一张banner,在设置面板状态时,勾选”从最后一个到第一个自动跳转“,这样才能实现banner1,2,3,1,2,3这样的轮播顺序。

Axure添加交互

2. 做到这里,在浏览器里预览,要让banner动,得有个触发条件,首先将banner动态面板设置为不可见(选中动态面板右键,设为不可见),然后在”页面交互“中设置当页面载入是,添加用例,显示动态面板

Axure添加用例

3.banner上的状态圆点没有发生变化,都是一样的状态,现在来修改这3个圆点,让3个圆点对应各自的banner。给3个圆点添加交互样式(选中圆点,右键添加交互样式),在”选中”下设置圆点样式,选择填充个颜色(红色,自行设置),3个圆点同理设置。

Axure填充颜色

5. 然后将圆点的效果和动态面板联系起来,在动态面板“显示”一项的用例里继续添加内容,部件里选择“设置选择/选中”,banner1显示时,选中圆点1(选定状态值:true),圆点2和3为未选中状态(选定状态值:false),以此类推设置即可。

注意:用例是一项一项执行,不要把圆点的状态放错位置哟~圆点状态要和对应的banner状态一致哦~

Axure设置选中

6. 全部制作完成,点击预览。

以上内容就是关于Axure动态面板实现banner的轮播效果,更多教程,可以关注Axure中文网。

Leave a Reply

在线客服
客服邮箱
客服电话
17051276424