养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-09-26 03:24:09

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

工具/原料

Axure

方法/步骤

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

© 一点知识