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

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

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

鼠標(biāo)單擊支持時(shí)，顯示對(duì)應(yīng)支持得大圖，空白地方隱藏大圖

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

原型地址：2a9rvm.axshare/#g=1

二、制作材料準(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ù)需要通過動(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)得縮放效果。我們通過設(shè)置尺寸得交互，將支持得尺寸先設(shè)置為原來得1.1倍，錨點(diǎn)在中部，設(shè)置尺寸得交互需要增加線性得動(dòng)畫，動(dòng)畫時(shí)間為500毫秒。再用等待得交互，等待動(dòng)畫時(shí)間介紹，因?yàn)榍懊娴脛?dòng)畫時(shí)間是500毫秒，所以這里也是等待500毫秒。最后我們?cè)俅斡迷O(shè)置尺寸得交互，將支持大小還原，因?yàn)榍懊媸欠糯罅?.1倍，所以這里也是縮小1.1倍，同樣地，我們也給他增加一個(gè)線性得動(dòng)畫，動(dòng)畫時(shí)間為500毫秒。

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

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

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

那本期得教程就到此為止了，感謝您得閱讀，我們下期見，88~

感謝由 等AI產(chǎn)品人 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止感謝

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