動態(tài)面板在axure里經(jīng)常被使用到，它是一個多層容器。舉例來說，好比一本書有很多頁面，每一個頁面（層）放不同內容，他可以與其它元件組合使用，實現(xiàn)動態(tài)切換改變狀態(tài)的效果。

先看下預覽效果：

Step1. 準備圖片素材

以人人都是產品經(jīng)理的輪播圖為例，可以使用谷瀏覽器，右擊你要的圖片，選擇“檢查”功能，在代碼區(qū)復制你需要的圖片地址，就可以打開下載（其他方式的隨意）

Step2. 組件排布與樣式設置

1. 拖入基礎組件

如下圖，拖入準備好的圖片素材，拖入文字組件和三個矩形（水平分布好）。

2. 設置組件樣式

設置大圖樣式，圓角為10；

全選下方三個矩形，設置樣式圓角為80，透明度為70%，并設置其交互樣式，選中時狀態(tài)填充顏色為白色，透明度100%。

3. 創(chuàng)建動態(tài)面板

全選所有組件，右擊-轉換為動態(tài)面板：

4. 復制多層動態(tài)面板

雙擊動態(tài)面板，給動態(tài)面板命名，點擊復制按鈕，復制出三層面板：

5. 編輯多層動態(tài)面板

雙擊state2，編輯state2內容，將圖片文字替換，右擊第二個小橫條，將其設置為選中狀態(tài)，同理完成state3的編輯，并對state1中第一個小橫條進行默認選中，這時候已經(jīng)完成整個動態(tài)面板的樣式。

6. 添加左右箭頭

如圖，添加左右箭頭（可以是圖片，也可以自己做），將其設置為默認隱藏，這時候完成了所有組件的設置與排布。

Step3. 交互效果設置

1. 設置面板自由輪播

因為頁面進入時，就開始輪播，所以交互觸發(fā)條件為“載入時”，點中動態(tài)面板，設置載入時事件如下，循環(huán)播放面板。

2. 設置鼠標移入面板時顯示左右箭頭，移出動態(tài)面板時隱藏左右箭頭

常見的錯誤做法是：直接點輪播圖面板，事件如下圖，這種做法會導致鼠標移入時，確實是顯示了左右箭頭，但是鼠標要移動左右箭頭時，左右箭頭會狂閃或隱藏（因為你在鼠標移入左右箭頭時，就是鼠標移出輪播圖的時候，這時候會觸發(fā)隱藏左右箭頭的事件）。

正確的做法是：將左右箭頭與輪播圖全選，右擊轉為一個新的大面板，鼠標移入大面板時，顯示左右箭頭，鼠標移出大面板時，隱藏左右箭頭。

3. 點擊左右箭頭，切換動態(tài)面板狀態(tài)

點選左箭頭，設置點擊時，輪播圖面板為下一狀態(tài)，同理設置右箭頭點擊時，輪播圖面板為上一狀態(tài)。

Step4. 干擾修正

以上的操作，實際預覽會產生一個問題，就是當點擊箭頭切換后，輪播圖不會再自動輪播，因為點擊箭頭后，會中斷輪播圖自身“載入時”自動播放下一個的事件，效果如下：

修正做法：點選輪播圖，將輪播圖面板“載入時”事件，復制到輪播圖面板“狀態(tài)改變時”事件即可，事件如下：

以上操作，即完成了整個輪播圖效果，預覽效果：

有想要做的效果可以留言，如果我會做，可以下次出教程～

作者：五月，微信公眾號：五月頻道（wuyuepd）

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

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