Axure 交互案例：放大缩小图片

产品经理在进行原型设计的时候，时常会遇到这样一种动态效果：鼠标移入到页面中的某个图片或者图标上，图标会进行放大，提醒用户现在鼠标所在的位置为当前的图片。移出该图片时，图片的尺寸回复为原本大小。

通常我们会在图片的展示页面中用到它，比如电商网站中商品的展示页面。

在前面的分析中，我们基本知道这个交互的逻辑是怎样的了，那么这个效果在Axure RP9中应该怎么样去操作设置呢？我们一步步来看看。

一、准备页面元素。

这里我们使用了两张商品的图片，是这个效果的主要部分，其他的元素大家可以按照自己的实际情况去绘制，这里就不浪费这个时间了。

二、设置交互

1、选中需要设置的图片（先设置其中一个）

2、将检查窗口的标签切换到“交互”标签，方可进行交互设置。

3、点击新建交互，创建一个新交互。选择用例事件，按照我们的交互效果，这里选择的是鼠标移入时事件。

4、接着选择用例动作，同样根据我们的需要选择“设置尺寸”动作

5、配置“设置尺寸”动作，选择当前部件即可对当前选择的图片的尺寸进行设置。

6、设置好放大后图片的尺寸，左边选择缩放时的锚点。可以根据你的实际需要选择缩放时的动画与动画时间，或者不选择动画。

7、预览看一下效果。

8、鼠标移入时图片放大的交互设置我们就完成了，接下来我们要设置的是，当鼠标移出图片的时候，图片恢复为原来的大小。经过前面的设置，相信大家对于这个设置已经有思路了。在刚才的交互设置的下方，选择“新建交互”

9、选择事件。没错，这里我们要选择的是“鼠标移入时”相对应的事件“鼠标移出时”。

10、动作和动作的配置与“移入时”类似，不同的是图片的尺寸是图片的原尺寸。

11、点击确定，完成交互设置。

12、这时候预览一下最终效果。

通常我们不止在一张图片上应用这个交互。在确保交互的设置没有问题之后，就可以将这个交互应用到其他图片中了，这里有这样两种方法可以复刻这个交互。

1、复制交互设置，粘贴到另外的图片的交互用例中。选择需要复制的交互，CTRL+C（或者右键菜单选择“复制”）。选中新的图片，直接CTRL+V即可复制用例交互成功。

2、复制带交互的图片。

双击图片更改图片，选择实现准备好的不同的图片即可。

Axure 9有很多朋友在使用上还比较生疏，如果有需要的话，大家可以把需要了解或者不清楚如何制作的案例告知我们，我们将会给大家讲述，在Axure 9中该如何解决问题、制作案例，期待大家的反馈。