多语言展示
当前在线:1346今日阅读:39今日分享:10

Axure使用:原型中如何实现图片轮播效果

Axure作为动态交互设计的软件之一,是可以实现图片轮播效果的。主要借助动态面板和矩形工具就可以实现这个功能。
工具/原料

Axure

方法/步骤
1

添加动态面板:找到动态面板并将其拖入到工作区域。根据自己的实际需求给动态面板设置合适的尺寸。

2

为动态面板添加状态:(在此演示三张轮播图的操作,可根据实际情况添加图片数量)双击动态面板,添加三个状态。

3

添加图片:双击动态面板后,双击状态名称进入状态编辑页。为该状态添加图片。

4

添加图片的方法:方法一:直接将本地的图片复制进来。方法二:添加图片控件,双击图片控件,选择本地图片文件。

5

制作滚动按钮:选择原型工具。为其设置选中状态。因为制作了三个图片,再复制两个按钮出来。调整按钮的大小和位置,我这里设置的9*9。

6

制作图片载入效果:载入时——设置动态面板状态——当前原件(如果改名字了,也可以选择动态面板的名字)——Next状态——向后循环——间隔时间——首个状态延迟——进入动画、退出动画——确定。【注意】进入动画和退出动画可以根据自己的喜好选择效果,此处为默认的选项。

7

关联轮播按钮:给轮播按钮命名1、2、3。为动态面板设置“状态改变时”条件,面板状态改变时对应的按钮被选中,设置过程见图片。

8

【注意1】加载时默认显示第一张图片。设置第一个按钮为选中状态。【注意2】按钮一次只能选中一个,记得给他们放到一个组里面哦。【注意3】不要忘记把按钮移动到图片上面去。来看下效果。

注意事项
1

如有疑问可以留言沟通。

2

帮到你的话请投一票哈

推荐信息