起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：三維陣列圖片的自動切換展示
如何利用元件的尺寸變化、移動變化等實現三維列陣圖片的自動切換展示？筆者在此給出了詳細教程，與大家分享~~
今天分享實現五張三維陣列圖片切換的方法，主要是利用元件的尺寸變化、移動變化、圖層順序和動態面板切換控制循環等技術點。動效圖如下：
具體實現方法
第一步：元件的實現
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協議
歡迎關注個人公眾號：艾斯的Axure峽谷
