Axure高保真教程：图片列表（放大效果）
一、制作完成后应具备以下效果
鼠标移入图片时，图片有有一个放大缩小的效果
鼠标单击图片时，显示对应图片的大图，点击空白地方隐藏大图
制作完成后，再次使用时，仅需要在中继器表格内导入图片，自动生成交互效果
原型地址：https://2a9rvm.axshare.com/#g=1
二、制作材料准备
制作的原型的元件包括：中继器、图片元件，动态面板。
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~
本文作者 @AI产品人
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
