图片列表是常用的展示方式，所以今天作者就和大家分享，在Axure里如何用中继器制作一个能够查看大图的图片列表。
一、制作完成后应具备以下效果
- 鼠标移入图片时，图片有有一个放大缩小的效果
- 鼠标单击图片时，显示对应图片的大图，点击空白地方隐藏大图
- 制作完成后，再次使用时，仅需要在中继器表格内导入图片，自动生成交互效果
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/ca3dd539f46dc856/#g=1
【原型下载】
方式2：https://weidian.com/item.html?itemID=3856417707
那下面我们一起开始制作吧。
二、制作材料准备
制作的原型的元件包括：中继器、图片元件，动态面板。
1. 中继器内部元件
我们首先添加一个中继器原件，讲中继器内部自带的矩形删除，然后在中继器放置一个图片元件，案例中图片宽为200，高为200，这里根据你需要展示的图片比例设置即可。完成后鼠标右键将图片转为动态面板，后续需要通过动态面板做移入放大缩小的效果，这里动态面板需要取消自适应内容。
中继器表格表格第一列我们可以改名为picture，在下面表格里鼠标右键导入图片，或者直接复制粘贴图片进去即可。
2. 中继器外部元件
外部只需要一个图片的元件，这个图片是大图，图片大小自己设定即可，宽和高的比例应该和中继器里的图片的比例一致，案例中是宽500，高500。然后我们需要将大图转为动态面板，然后固定在浏览器中部，默认隐藏。
三、交互制作
1. 中继器每项加载时交互
中继器每项加载时，我们要把存放在中继器表格里面的图片，设置到中继器内的图片元件。这里我们用设置图片的交互，选择值==item.picture，设置完成后的效果如下图所示
2. 鼠标移入图片时交互
鼠标移入图片时，我们希望对应图片有个动态的缩放效果。我们通过设置尺寸的交互，将图片的尺寸先设置为原来的1.1倍，锚点在中部，设置尺寸的交互需要增加线性的动画，动画时间为500毫秒。再用等待的交互，等待动画时间介绍，因为前面的动画时间是500毫秒，所以这里也是等待500毫秒。最后我们再次用设置尺寸的交互，将图片大小还原，因为前面是放大了1.1倍，所以这里也是缩小1.1倍，同样地，我们也给他增加一个线性的动画，动画时间为500毫秒。
3. 鼠标单击图片时交互
鼠标点击中继器内的图片时，我们用显示的交互，将大图的动态面板显示，这里需要勾选灯箱效果，这样点击空白的地方大图才会自动隐藏，灯箱的颜色为黑色，50%透明度。最后，我们还需要将鼠标单击图片的值传到大图里，这里图片的值其实就是保留在中继器表格里picture列的值，所以我们设置大图的值==item.picture
这样我们就完成了中继器图片列表放大图片的原型模板了，下次使用时，我们只需要导入图片即可自动生成交互，是不是很方便呢？感兴趣的同学们可以动手试试哦。
那本期的教程就到此为止了，感谢您的阅读，我们下期见，88~
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
