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

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

axureyuanxing

网页图片翻牌效果

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

1.1

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

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

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

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

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

1

2

网站常见幻灯片

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

1

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

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

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

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

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

1

2

3

4

网页常见走马灯

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

2

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

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

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

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

6.1

7

8

9

 

本文由 @jukilee 原创发布于人人都是产品经理。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。
2人打赏

评论( 0

登录后参与评论
加载中