如何利用元件的尺寸變化、移動(dòng)變化等實(shí)現(xiàn)三維列陣圖片的自動(dòng)切換展示？筆者在此給出了詳細(xì)教程，與大家分享~~

今天分享實(shí)現(xiàn)五張三維陣列圖片切換的方法，主要是利用元件的尺寸變化、移動(dòng)變化、圖層順序和動(dòng)態(tài)面板切換控制循環(huán)等技術(shù)點(diǎn)。動(dòng)效圖如下：

具體實(shí)現(xiàn)方法

第一步：元件的實(shí)現(xiàn)

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

2. 再拉入一個(gè)動(dòng)態(tài)面板，添加兩個(gè)狀態(tài)，命名為：控制循環(huán)。（作用是利用動(dòng)態(tài)面板的循環(huán)切換，來控制三維陣列圖片組的循環(huán)播放。）

3. 最后，再拉入一個(gè)文本標(biāo)簽，命名為：狀態(tài)。（作用是記錄當(dāng)前中間置頂?shù)木匦涡蛱?hào)。）

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

第二步：交互的實(shí)現(xiàn)

1.?實(shí)現(xiàn)動(dòng)態(tài)面板的循環(huán)切換：

選中動(dòng)態(tài)面板【控制循環(huán)】，添加【載入時(shí)】交互事件，選中【設(shè)置面板狀態(tài)】-》勾選【當(dāng)前元件】-》選擇狀態(tài)“next”，勾選【向后循環(huán)】，勾選【循環(huán)間隔】2000毫秒，勾選【首個(gè)狀態(tài)延時(shí)】，如下圖所示：

這樣，面板就可以實(shí)現(xiàn)無限循環(huán)切換。

2. 實(shí)現(xiàn)動(dòng)態(tài)面板循環(huán)切換時(shí)，控制矩形的循環(huán)切換展示：

首先，我們需要【文本標(biāo)簽“狀態(tài)”】來記錄當(dāng)前哪一個(gè)矩形位于中間最頂層。

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

最后，選中動(dòng)態(tài)面板【控制循環(huán)】，添加【狀態(tài)改變時(shí)】交互事件。

情形一：當(dāng)矩形C位于中間時(shí)（ABCDE），即條件為：“狀態(tài)”的文字等于C，則

a、設(shè)置文本標(biāo)簽“狀態(tài)”的文字等于D；此時(shí)，五個(gè)矩形順序變?yōu)?strong>BCDEA。

b、五個(gè)矩形的大小變?yōu)椋壕匦蜠為200 *300。矩形C、E為160*240。矩形B、A為128*192。

c、五個(gè)矩形的位置變?yōu)椋壕匦蜝（222，204）、矩形C（330，180）、矩形D（470，150）、矩形E（650，180）、矩形A（790，204）。

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

如下圖所示：

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

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

第三步：效果的預(yù)覽

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

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