本文主要講述了如何利用Axure制作出手風(fēng)琴效果的圖片展示效果，一起來看看~

效果體驗(yàn)鏈接：https://5oqd60.axshare.com

操作分析

1. 鼠標(biāo)移入圖片時，隱藏遮罩，鼠標(biāo)移出圖片時，顯示遮罩。
2. 單擊某圖片，其余圖片逐漸隱藏，被點(diǎn)擊的圖片視圖首先移至最左側(cè)，然后尺寸變大，從左至右逐漸覆蓋整個頁面，這個時候圖片全景顯示。
3. 圖片展開后點(diǎn)擊關(guān)閉按鈕，圖片視圖以左側(cè)為錨點(diǎn)收縮至展開前的尺寸，然后整體移至點(diǎn)擊前的位置。

關(guān)鍵要素

動態(tài)面板的使用。

實(shí)現(xiàn)步驟

準(zhǔn)備階段

1. 首先準(zhǔn)備5張同樣尺寸的圖片，我這里的圖片尺寸為1680*1050。
2. 打開Axure，往工作區(qū)拖入一個1920*1080的矩形（矩形大小隨意，只要比圖片大就ok了~），設(shè)置填充顏色為灰黑，拖至x=0，y=0的位置。
3. 拖入一個318*1050的動態(tài)面板（寬高可自己設(shè)置），然后按住鍵盤ctrl+shift，用鼠標(biāo)左鍵拖動復(fù)制4個同樣的動態(tài)面板，擺放在合適的位置，這里分別給他們命名為01~05。
4. 將五張圖片分別放入01~05的動態(tài)面板中，需要注意的是，01動態(tài)面板中的圖的位置為x=0，y=0；02動態(tài)面板中的圖的位置為x=-338，y=0；03動態(tài)面板中的圖的位置為x=-678，y=0；04動態(tài)面板中的圖的位置為x=-1021,y=0；05動態(tài)面板中的圖的位置為x=-1362，y=0，關(guān)閉icon，分別拖入一個關(guān)閉icon放置在每個動態(tài)面板state中的固定位置，這里是x=1614,y=18。
5. 拖入一個318*1050的矩形，填充灰黑色，取消邊框，透明度設(shè)置為50%，然后按住鍵盤ctrl+shift,用鼠標(biāo)左鍵拖動復(fù)制4個同樣的矩形，分別覆蓋在動態(tài)面板上,作為遮罩。

全部準(zhǔn)備完成后如下圖所示：

設(shè)置交互

（1）首先設(shè)置鼠標(biāo)移入隱藏遮罩，鼠標(biāo)移出顯示遮罩的交互。

選中遮罩，分別設(shè)置如下所示的交互：

（2）然后對01~05動態(tài)面板設(shè)置如下交互

01動態(tài)面板的交互：

02動態(tài)面板的交互：

03動態(tài)面板的交互：

04動態(tài)面板的交互：

05動態(tài)面板的交互：

（3）然后是展開圖片中的關(guān)閉按鈕的交互

01動態(tài)面板中的關(guān)閉按鈕的交互：

02動態(tài)面板中的關(guān)閉按鈕的交互：

03動態(tài)面板中的關(guān)閉按鈕的交互：

04動態(tài)面板中的關(guān)閉按鈕的交互：

05動態(tài)面板中的關(guān)閉按鈕的交互：

交互設(shè)置完成，點(diǎn)擊預(yù)覽即可實(shí)現(xiàn)手風(fēng)琴圖片展示效果啦~~~

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

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