如何利用元件的尺寸變化、移動變化等實現三維列陣圖片的自動切換展示？筆者在此給出了詳細教程，與大家分享~~

今天分享實現五張三維陣列圖片切換的方法，主要是利用元件的尺寸變化、移動變化、圖層順序和動態面板切換控制循環等技術點。動效圖如下：

具體實現方法

第一步：元件的實現

1.?從左側拉入五個矩形，其中矩形為C的大小設置為200 *300。矩形B、D的大小設置為160*240。矩形A、E的大小設置為128*192。分別記錄這五個矩形的X、Y軸坐標，其中矩形A（222，204）、矩形B（330，180）、矩形C（470，150）、矩形D（650，180）、矩形E（790，204）。

2. 再拉入一個動態面板，添加兩個狀態，命名為：控制循環。（作用是利用動態面板的循環切換，來控制三維陣列圖片組的循環播放。）

3. 最后，再拉入一個文本標簽，命名為：狀態。（作用是記錄當前中間置頂的矩形序號。）

如圖所示：（其中的矩形的圖層順序依次為A、B、C、D、E，矩形e為最頂層）

第二步：交互的實現

1.?實現動態面板的循環切換：

選中動態面板【控制循環】，添加【載入時】交互事件，選中【設置面板狀態】-》勾選【當前元件】-》選擇狀態“next”，勾選【向后循環】，勾選【循環間隔】2000毫秒，勾選【首個狀態延時】，如下圖所示：

這樣，面板就可以實現無限循環切換。

2. 實現動態面板循環切換時，控制矩形的循環切換展示：

首先，我們需要【文本標簽“狀態”】來記錄當前哪一個矩形位于中間最頂層。

其次，總共有五種情形，即矩形A、B、C、D、E位于中間最頂層。

最后，選中動態面板【控制循環】，添加【狀態改變時】交互事件。

情形一：當矩形C位于中間時（ABCDE），即條件為：“狀態”的文字等于C，則

a、設置文本標簽“狀態”的文字等于D；此時，五個矩形順序變為BCDEA。

b、五個矩形的大小變為：矩形D為200 *300。矩形C、E為160*240。矩形B、A為128*192。

c、五個矩形的位置變為：矩形B（222，204）、矩形C（330，180）、矩形D（470，150）、矩形E（650，180）、矩形A（790，204）。

d、此時，還需要將矩形間的圖層順序調整，即先將C、E置頂，然后再置頂D。

如下圖所示：

同理，接下的四種情形，都是改變【狀態】的文本，更改五個矩形的大小和位置，并調整圖層順序。

3. 頁面初始狀態圖層的調整：由于頁面的初始排版，其中的矩形的圖層順序依次為A、B、C、D、E，矩形e為最頂層，所以需要在頁面【載入時】，需要將矩形B、D先置頂，再將C置頂。（注意：如果初始狀態矩形的圖層順序為C置頂，B、D其次，AE最底，則不需要這一步驟）

第三步：效果的預覽

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議