快好知 kuaihz

Axure RP设计图片翻牌、幻灯片、走马灯的方法

以下介绍几个常用小教程,还是那句话——内容简单,适合菜鸟查阅,老鸟可飘过,顺便帮忙点个赞哈

网页图片翻牌效果

例如:鼠标移到图片上时,该图片显现翻牌效果,显示另外一张图片。鼠标移开,恢复原图

1.拖动1个图形元件,右键设置“转换为动态面板“,双击动态模板,添加“State2”;

2.对State1,和State2导入图片,图片大小要一致;

3.添加鼠标移入交互动作,并添加动作“设置面板状态”→“当前元件”→“Next”→{进入动画}与{退出动画}均为“向右翻转”;

4.继续添加鼠标移出交互动作,并添加动作“设置面板状态”→“当前元件”→“Previous”→{进入动画}与{退出动画}均为“向右翻转”;

5.最后把图片动态面板,复制多几个,一个个去修改它们的图片。

网站常见幻灯片

例如:载入网页,幻灯自动轮转,点击幻灯号数,直接跳入该号图片

1.拖进一个动态面板元件,设置尺寸(根据自己爱好定义),我这里设置的为宽500,高200,双击进入面板状态管理,设置面板名称,面板状态添加5个状态;

2.针对面板内的5个状态,每个都拖入图片,并设置好图片的尺寸,尺寸与动态面板一致;

3.回到index页,添加页面加载时交互方式→添加动作设置面板状态→选择动态面板→选择状态Next→选择向后循环、循环间隔2000毫秒、首个状态延时2000毫秒后切换。设置完成后,可进入页面测试,查看幻灯图是否已自动轮转;

4.添加矩形元件,设置序号、尺寸、样式,复制到每张动态状态上;

5.设置矩形的鼠标点击交互,添加设置面板状态动作→选择序号对应的图片名称→添加等待动作→等待时间2000毫秒→添加设置面板状态动作→设置选择状态Next→选择循环间隔2000毫秒。

网页常见走马灯

例如:公司通告、股市数据、购物、博彩等都可使用到

1.拖进一个动态面板元件,设置尺寸和背景色;

2.双击动态面板进入面板状态管理,添加面板名称,新建一个面板状态;

3.进入面板状态state1内,添加文字,文字设置为白色字体,再进入面板状态state2内,添加文字,文字设置为白色字体;

4.设置交互动作载入时→添加动作设置面板状态→选择动态面板→选择状态Next→选择向后循环和循环间隔30000毫秒→进入动画从左滑动,时间30000毫秒(建议不要设置太快,否则闪瞎眼)

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:走马灯  走马灯词条  设计图片  设计图片词条  幻灯片  幻灯片词条  方法  方法词条  Axure  Axure词条  
原型

 Axure教程 | web端的验...

上一篇文章给大家分享了如何制作web端的注册和登录,没有看过的小伙伴“点击这里”。今天给大家带来了的是升级版本,如何制作“验证码”。为什么会出现“验证码”这种反...(展开)

原型

 Axure 教程:轻松导出图标字...

近几年图标字体使用非常广泛,它的优点是可以自定义图标颜色、大小等参数,且图标不会失真。本文将教你轻松导出图标字体中的所有图标,任你所用。一、问题来源最近在集中整...(展开)