Axure原型制作案列--图片放大缩小(基于动态面板)

时间:2024-03-06 21:27:26

本篇案列的效果图:一张图片,鼠标移动到图片上时,图片以中心为原点,向四周放大;当鼠标离开图片时,图片还原到初始状态。

 

准备工作:一台电脑,安装Axure软件(安装包请自行百度下载,我的Axure 版本是RP8)。

 软件图标

哦,需要软件的及汉化包的,网上找不到,可以加我微信 luckybobo0606,免费分享。

长篇大论的理论我在这里先不写了,因为是案例,所以直接上制作步骤吧,不会的小主位,希望你们按着我的步骤能出效果图,谢谢各位。

 

第一步:在“原件库”中,选择“动态面版”原件,鼠标拖动到页面编辑区,命名为 img。(我将图片放到 x:100, y: 100 的位置),动态面板根据图片尺寸调整,本例中大小为 200*200大小。

 

第二步:鼠标选中页面中的 动态面板img,在右侧选择“样式”页签,背景图片栏中 导入一个图片,并在下面的长框中选择“填充”项。

第三步:鼠标选中页面中的 动态面板img, 鼠标右键,选择“转换为动态面板”,并给面板起名为 outter。

(本例中要实现以中心点为核心的动图,是需要二个动态面板的,即动态面板中嵌套动态面板)

第四步:选中页面中的动态面板,在右侧“属性”栏,交互下的“更多事件>>>”中选择 “鼠标移入时” 添加触发事件,1,鼠标移入到图片中时,设置图片的尺寸大小;2,让外层的动态面板移动。注意:图片的坐标是心图片的 左上定点为原点的。

(因图片大小为 200*200,原始坐标为 100*100,其中心点坐标为 200*200,图片要放大一倍,即图片放大后的尺寸为 400*400,图片需要向四周各放大100,所以移动的距离就应该是100,那么图片移动后的原点坐标就应该是 0,0。)

选择鼠标事件

 

1、设置内层图片动态面板的尺寸为 400*400,并设置动画为 线性,时间 1000毫秒。

2、移动外面的动态面板到 绝对位置(to) 0,0 上,动画选择 线性,时间为 1000毫秒。设置完成后点击【确定】按钮。

 第五步:设置鼠标移出时事件。选中页面中的动态面板,在交互中给“鼠标移出时”添加事件。1、设置图片大小为 200*200;2、移动动态面板到初始坐标 100*100.

(发现没:鼠标移出事件与鼠标移入时的事件动作刚好相反。)

 

ok, 设置完成后,点击 预览,或在菜单中选择 发布--> 预览(快捷键是 F5),去见证奇迹吧。

初次写案列教程,还原其效果的自己制作过程,肯定有很多不足之处,请小主们踊跃指出,在下会尽快改正的。谢谢!