使用工具:Axure pr 8.1版本。
制作效果如下图:banner自动播放的交互效果
自动播放效果的实现非常简单,思路就是制作两个动态面板,一个是图片的动态面板,一个是轮播图下边的点的动态面板。然后设置动态面板的相应状态即可。下面描述详细的步骤。
第一步:添加广告banner动态面板
1.1、拖动占位图或者图片到界面,设定大小,为了能表示是第几张图片,我又拖动了一个矩形设置无边,然后按住command键将占位图和矩形组合,然后右键转为动态面板,给动态面板命名为轮播广告banner。
1.2、双击广告banner动态面板,添加三张相同的图片状态。如下图:复制banner1,添加banner2,和banner3。双击banner2进入banner2编辑面板将矩形内的文字改为banner2,banner3同样的操作。
第二张图片示例:
1.3、那么如何使banner自动轮播起来呢,广告banner动态面板右侧属性,点击载入时,进入下方选择页面。点击设置面板状态,选中广告banner面板。然后选择状态next,向后循环,2500毫秒间隔,进入动画退出动画选择执行是时间500毫秒。
至此,广告banner的轮播效果完成,那么还有轮播的时候,底下的圆点应该要切换到对应的位置的圆点。
第二步:添加轮播圆点动态面板
2.1、拖动三个椭圆至界面,调整大小及距离。将第一个圆点设置成灰色,第二个第三个设置成白色。同样按住command键选中三个圆点右键组合,点击圆点组合右键选择转为动态面板,命名为轮播圆点。
2.2、双击轮播圆点动态面板,同样复制三个状态,对应三张图片。如下图,双击圆点2进入圆点2编辑页面,将三个圆点中的第二个圆点设置灰色,其他两个白色。双击圆点3进入圆点3编辑页面,将第三个圆点设置灰色,其他两个白色。
状态2:
状态3:
2.3、同样点击轮播圆点动态面板,界面右侧属性,点击载入时设置相应属性。
最后发布预览就可以查看广告banner轮播效果了。