Axure高保真教程：图片列表（放大效果）

2022-12-2209:47:39原型设计Comments5,280 views字数 1041阅读模式

一、制作完成后应具备以下效果

鼠标移入图片时，图片有有一个放大缩小的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

鼠标单击图片时，显示对应图片的大图，点击空白地方隐藏大图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

制作完成后，再次使用时，仅需要在中继器表格内导入图片，自动生成交互效果
原型地址：https://2a9rvm.axshare.com/#g=1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

二、制作材料准备

制作的原型的元件包括：中继器、图片元件，动态面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

1. 中继器内部元件

我们首先添加一个中继器原件，讲中继器内部自带的矩形删除，然后在中继器放置一个图片元件，案例中图片宽为200，高为200，这里根据你需要展示的图片比例设置即可。完成后鼠标右键将图片转为动态面板，后续需要通过动态面板做移入放大缩小的效果，这里动态面板需要取消自适应内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

中继器表格表格第一列我们可以改名为picture，在下面表格里鼠标右键导入图片，或者直接复制粘贴图片进去即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

2. 中继器外部元件

外部只需要一个图片的元件，这个图片是大图，图片大小自己设定即可，宽和高的比例应该和中继器里的图片的比例一致，案例中是宽500，高500。然后我们需要将大图转为动态面板，然后固定在浏览器中部，默认隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

三、交互制作

1. 中继器每项加载时交互

中继器每项加载时，我们要把存放在中继器表格里面的图片，设置到中继器内的图片元件。这里我们用设置图片的交互，选择值==item.picture，设置完成后的效果如下图所示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

2. 鼠标移入图片时交互

鼠标移入图片时，我们希望对应图片有个动态的缩放效果。我们通过设置尺寸的交互，将图片的尺寸先设置为原来的1.1倍，锚点在中部，设置尺寸的交互需要增加线性的动画，动画时间为500毫秒。再用等待的交互，等待动画时间介绍，因为前面的动画时间是500毫秒，所以这里也是等待500毫秒。最后我们再次用设置尺寸的交互，将图片大小还原，因为前面是放大了1.1倍，所以这里也是缩小1.1倍，同样地，我们也给他增加一个线性的动画，动画时间为500毫秒。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

3. 鼠标单击图片时交互

鼠标点击中继器内的图片时，我们用显示的交互，将大图的动态面板显示，这里需要勾选灯箱效果，这样点击空白的地方大图才会自动隐藏，灯箱的颜色为黑色，50%透明度。最后，我们还需要将鼠标单击图片的值传到大图里，这里图片的值其实就是保留在中继器表格里picture列的值，所以我们设置大图的值==item.picture文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/30419.html