动态面板幻灯片样式

Axure中动态面板元件的使用比较常见,在使用Axure搭建模板中需要动态效果的地方基本上都会用到它,所以动态面板的使用在Axure中是一个重点。
动态面板的使用非常广泛,不仅可以制作登录的切换效果,还可以制作幻灯片。
幻灯片其实就是一个可控制的动态轮播。
在这里插入图片描述
如上图是一个简易的幻灯片例子。一个幻灯片的展示效果,也要在搭建好样式的前提下实现。
简易幻灯片的制作:
首先将动态面板元件拖放到元件编辑区域,然后创建出多个面板,用于存放播放幻灯片的图片。
在这里插入图片描述 在这里插入图片描述
然后双击动态面板进入面板状态管理页面,分别点击进入每一个面板添加一个大小和动态面板大小相同的图片。要设置图片同样的是在元件面板找到图片元件,拖动至各个面板的元件编辑区域并将元件大小调整至蓝色虚线框相同或比其小即可(超过后动态面板将不会完全显示内容)。
在这里插入图片描述 在这里插入图片描述
双击图片元件,会跳转到导入图片的文件资源管理窗口,再选择自己喜欢的图片进行导入设置。如此操作设置和调整好每一个面板的图片。
在这里插入图片描述
最后添加两个矩形元件或者按钮元件(同样的在元件面板寻找),按照文章开始展示模板中的播放和暂停样式调整和设置OK。
幻灯片控制的用例设置:
样式OK后选中播放按钮,给其添加点击播放的事件。
在这里插入图片描述
点击事件进入用例编辑界面在配置动作栏中勾选要操作的动态面板元件。
在这里插入图片描述
再在下面进行参数配置,选择状态设置为Next就可以进行无限循环切换面板。
在这里插入图片描述
一般勾选向后循环,最主要是设置进入和退出动画。如果不设置进入和退出动画则不会有动态切换效果。
这样,在预览中查看该页面效果:点击播放按钮动态面板开始执行动态切换,根据设置的循环间隔时间执行多久切换一次,从而达到一个幻灯片的效果。
在这里插入图片描述
还差一个暂停按钮。直接设置该按钮的点击事件,在用例添加动作页面选择设置面板状态并配置动作勾选到该动态面板设置选择状态为停止循环。
在这里插入图片描述
在播放途中需要暂停到某一个面板时,则可以点击暂停按钮让动态面板停止切换。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值