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

2017-06-01 13:23:00

效果简介

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

效果图

步骤

动画大体上分为两部分：
第一部分，小方块随着鼠标的移动而移动；
第二部分，右侧放大图显示小方块所在区域的内容。

(先介绍第一部分）

1、找图，贴图。

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

贴图

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.right )，则移动xiaotu的位置到（datu.right - xiaotu.width ，xiaotu.y）;

上：if(xiaotu.y 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种格式的图片，第一列为序号。每一行导入的图片是相同的，想切换几张图片，就添加几列，在这儿演示常见的切换四张图片的。选中某一个，右击“导入图片”，就可以添加想要的图片，如图：