如何在Axure中创建图片放大效果

喜欢的童鞋可以留邮箱给大家发原型奥!

效果简介


网页版淘宝,小方块随着鼠标的移动而移动,右侧显示小方块在左侧图片的放大部分,效果如下图。

效果图

步骤


动画大体上分为两部分:

第一部分,小方块随着鼠标的移动而移动;

第二部分,右侧放大图显示小方块所在区域的内容。

(先介绍第一部分)

1、找图,贴图。

找一张喜欢的图片贴上去(最喜欢艾斯了),大图设置为400x400;中间的小图设为160x160,黑色,透明度8。艾斯大图名称“datu”,透明小图名称“xiaotu”。

<可以想一下为什么要设置为400x400,160x160,评论回答~>

贴图

2、让xiaotu随着鼠标的移动而移动。

      可以想一下,鼠标在datu的范围内走到哪儿,xiaotu就跟到哪儿,所以应该在datu上添加【鼠标移动时】事件。

2.1 步骤示意图

“xiaotu随鼠标移动”的过程,转化为公式就是“使得xiaotu的中心的坐标和鼠标的坐标重合”,关系式为【鼠标.x = xiaotu.x + xiaotu.width/2】【鼠标.y = xiaotu.y + xiaotu.height/2】。

f(x)和f(y)的值分别为:

f(x)的值
f(y)的值

target:目标。

【鼠标移动时】事件作用在datu上,而移动的是xiaotu,所以xiaotu就是目标元件。

鼠标的坐标为(Cursor.x,Cursor.y)

理解不了target的,还可以用这种方式,效果一样但更好理解:

把xiaotu设置为局部变量

3、到目前为止xiaotu随着鼠标的移动而移动的效果已经出来,但还存在两个问题,①由于没有设置移动范围,鼠标超出datu的范围,xiaotu也会跟着跑出去;②xiaotu虽然会随着鼠标的移动而移动,但因为鼠标是作用在datu上的,而xiaotu覆盖在datu上,鼠标在xiaotu上面,所以中间的xiaotu层阻断了鼠标和datu的接触。造成鼠标在xiaotu范围内无论怎么移动xiaotu都不会移动,只有鼠标移出xiaotu的范围,xiaotu才会跟随鼠标移动。如图(原谅我的拍照技术):

第一个问题
第二个问题

有了问题就来解决问题,一个一个来~

①超出范围的问题。

超出范围是指xiaotu超出datu上、下、左、右的边框,所以只要给xiaotu设置范围就行:

e.g.如果xiaotu的左边框超出datu的左边框,则将xiaotu左边框和datu左边框对齐,xiaotu高度保持不变。其余三条边框同理。

转化为关系式就是:

左:if(xiaotu.x < datu.x ),则移动xiaotu的位置到(datu.x,xiaotu.y);

右:if(xiaotu.right > datu.right ),则移动xiaotu的位置到(datu.right - xiaotu.width ,xiaotu.y);

上:if(xiaotu.y < datu.y ),则移动xiaotu的位置到(xiaotu.x,datu.y);

下:if(xiaotu.bottom > datu.bottom ),则移动xiaotu的位置到(xiaotu.x,datu.bottom-xiaotu.height)。

同样在datu上添加【鼠标移动时】事件,点击【添加条件】,

左边界添加条件示例

点击【确定】设置好条件,移动xiaotu,如图:

【鼠标移动时】事件

注意切换 if 、else if,全部切换为 if 条件。

②鼠标在xiaotu范围内,xiaotu不随着移动的问题。

核心问题就是,xiaotu层不能阻挡鼠标在datu上的移动,但又不能把datu覆盖在xiaotu上。所以解决办法就是再在xiaotu上覆盖一层透明图,大小和datu一样,然后把datu上的【鼠标移动时】事件复制到透明图上。

覆盖透明层

这样就可以啦!

4、接下来就是右侧的放大图显示区(名称fangdaqu)。

它体现出来的过程是,xiaotu移到哪儿,右侧fangdatu显示区就显示哪个部位。换成逻辑来想,在这个例子中,xiaotu尺寸为160x160,datu尺寸为400x400,右侧fangdaqu尺寸为400x400,也就是要把160x160的图片全屏显示在400x400的画面上,放大2.5倍。右侧显示区只显示被xiaotu覆盖的放大部分,可以得到一个比例算式:(边长之比)

xiaotu:datu = fangdaqu:最大图,得到160:400 = 400:最大图,所以最大图长为1000。

我们放动态面板作为显示区,动态面板大小为400x400,点击进入,放图片,将其尺寸设置为1000x1000,如图:

右侧放动态面板
动态面板中图片

      放大显示的过程,其实就是zuidatu随着xiaotu有规律移动的过程。在这个例子中,xiaotu向右移动1个单位,zuidatu就要向左移动2.5个单位。所以鼠标移动的过程是作用在xiaotu上的。所以zuidatu移动的距离为:

x轴:(datu.x - xiaotu.x)*2.5。

y轴:(datu.y - xiaotu.y)*2.5。

X轴移动示例

注意:

不是【鼠标移动时】事件,是【移动时】事件!!!!【移动时】【移动时】!!!重要的事情说三遍,因为我写的时候感觉逻辑没毛病啊,为啥就是不移动咧!就是因为我用了【鼠标移动时】事件了!

到此为止,放大的效果已经出来了,如图:

放大效果

5、最后一步,添加小图切换效果。这个要用到中继器。

点击中继器,将原有的删除,替换成图片,如图:

中继器

然后回到首页,点击中继器,将中继器的布局设置为“水平”,如图:

设置布局方式为“水平”

6、添加要切换的图片,点击属性(要显示的图片是三个尺寸,第一个是左下中继器切换的60x60的小图,第二个是左上的400x400的datu,第三个是右边1000x1000的fangdatu)。横向添加3种格式的图片,第一列为序号。每一行导入的图片是相同的,想切换几张图片,就添加几列,在这儿演示常见的切换四张图片的。选中某一个,右击“导入图片”,就可以添加想要的图片,如图:

添加图片

设置完成后,如图:

图片添加完毕

然后点击“中继器”,设置【每项加载时】事件,设置小的切换图片,如图:

设置切换图片

设置完成后的效果就是这个样子,如图:

切换小图效果图

7、我们要的效果是,点击每一张小图,datu和fangdatu都跟着变化,所以,在中继器点击进入的图片上添加【鼠标单击时】事件,如图:

添加【鼠标单击时】事件

进入【鼠标单击时】事件,点击【设置图片】,然后设置datu和zuidatu的图片,如图:

设置zuidatu和datu的图片

到此,基本效果已经出来,如图:

基本效果图

8、但有些小细节还没有优化,比如左下的每个切换小图之间要间隔一点距离才好看;比如只有当鼠标移到datu上时,xiaotu才显示,右侧的放大图也才在此刻显示。

先优化第一个,回到主页,点击中继器,如图:

设置间隔

再优化第二个问题,在datu上添加【鼠标移入时】事件,当鼠标移入datu范围时,xiaotu和zuidatu显示;再添加【鼠标移出时】事件,当鼠标移出datu范围时,xiaotu和zuidatu隐藏。

9、终于写完啦!写了将近两个礼拜的零碎时间啊!

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 127,735评论 18 546
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 74,836评论 12 116
  • 我在两天在家里冷静了两天,也考虑了挺多的事情,关于工作,关于性格,关于关于感情问题。我觉得作为男朋友,我可能没...
    墨水_e5de阅读 360评论 0 1
  • 总是希望自己内心足够强大 强大到不需要任何支柱和信仰 强大到能够控制情绪的波澜起伏 可毕竟是人不是神 不知要犯多少...
    取名字啥的真的好烦阅读 23评论 0 0
  • 一 去年,我和大鹏在长沙,住在太平街的一家商务宾馆里,旁边是一排徽式建筑,牌匾上写着“贾谊故居”,气氛相当诡异。不...
    大师弟007阅读 771评论 39 16