導(dǎo)讀：圖片列表是常用的展示方式，所以今天作者就和大家分享，在Axure里如何用中繼器制作一個(gè)能夠查看大圖的圖片列表。

一、制作完成后應(yīng)具備以下效果

鼠標(biāo)移入圖片時(shí)，圖片有有一個(gè)放大縮小的效果

鼠標(biāo)單擊圖片時(shí)，顯示對(duì)應(yīng)圖片的大圖，點(diǎn)擊空白地方隱藏大圖

制作完成后，再次使用時(shí)，僅需要在中繼器表格內(nèi)導(dǎo)入圖片，自動(dòng)生成交互效果

二、制作材料準(zhǔn)備

制作的原型的元件包括：中繼器、圖片元件，動(dòng)態(tài)面板。

1. 中繼器內(nèi)部元件

我們首先添加一個(gè)中繼器原件，講中繼器內(nèi)部自帶的矩形刪除，然后在中繼器放置一個(gè)圖片元件，案例中圖片寬為200，高為200，這里根據(jù)你需要展示的圖片比例設(shè)置即可。完成后鼠標(biāo)右鍵將圖片轉(zhuǎn)為動(dòng)態(tài)面板，后續(xù)需要通過(guò)動(dòng)態(tài)面板做移入放大縮小的效果，這里動(dòng)態(tài)面板需要取消自適應(yīng)內(nèi)容。

中繼器表格表格第一列我們可以改名為picture，在下面表格里鼠標(biāo)右鍵導(dǎo)入圖片，或者直接復(fù)制粘貼圖片進(jìn)去即可。

2. 中繼器外部元件

外部只需要一個(gè)圖片的元件，這個(gè)圖片是大圖，圖片大小自己設(shè)定即可，寬和高的比例應(yīng)該和中繼器里的圖片的比例一致，案例中是寬500，高500。然后我們需要將大圖轉(zhuǎn)為動(dòng)態(tài)面板，然后固定在瀏覽器中部，默認(rèn)隱藏。

三、交互制作

1. 中繼器每項(xiàng)加載時(shí)交互

中繼器每項(xiàng)加載時(shí)，我們要把存放在中繼器表格里面的圖片，設(shè)置到中繼器內(nèi)的圖片元件。這里我們用設(shè)置圖片的交互，選擇值==item.picture，設(shè)置完成后的效果如下圖所示

2. 鼠標(biāo)移入圖片時(shí)交互

鼠標(biāo)移入圖片時(shí)，我們希望對(duì)應(yīng)圖片有個(gè)動(dòng)態(tài)的縮放效果。我們通過(guò)設(shè)置尺寸的交互，將圖片的尺寸先設(shè)置為原來(lái)的1.1倍，錨點(diǎn)在中部，設(shè)置尺寸的交互需要增加線性的動(dòng)畫(huà)，動(dòng)畫(huà)時(shí)間為500毫秒。再用等待的交互，等待動(dòng)畫(huà)時(shí)間介紹，因?yàn)榍懊娴膭?dòng)畫(huà)時(shí)間是500毫秒，所以這里也是等待500毫秒。最后我們?cè)俅斡迷O(shè)置尺寸的交互，將圖片大小還原，因?yàn)榍懊媸欠糯罅?.1倍，所以這里也是縮小1.1倍，同樣地，我們也給他增加一個(gè)線性的動(dòng)畫(huà)，動(dòng)畫(huà)時(shí)間為500毫秒。

3. 鼠標(biāo)單擊圖片時(shí)交互

鼠標(biāo)點(diǎn)擊中繼器內(nèi)的圖片時(shí)，我們用顯示的交互，將大圖的動(dòng)態(tài)面板顯示，這里需要勾選燈箱效果，這樣點(diǎn)擊空白的地方大圖才會(huì)自動(dòng)隱藏，燈箱的顏色為黑色，50%透明度。最后，我們還需要將鼠標(biāo)單擊圖片的值傳到大圖里，這里圖片的值其實(shí)就是保留在中繼器表格里picture列的值，所以我們?cè)O(shè)置大圖的值==item.picture

這樣我們就完成了中繼器圖片列表放大圖片的原型模板了，下次使用時(shí)，我們只需要導(dǎo)入圖片即可自動(dòng)生成交互，是不是很方便呢？感興趣的同學(xué)們可以動(dòng)手試試哦。

那本期的教程就到此為止了，感謝您的閱讀，我們下期見(jiàn)，88~

本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議