本章主要介紹如何使用動態(tài)面板的多狀態(tài)切換制作輪番圖，而輪番圖在首頁消息和活動的推送以及APP引導頁有廣泛的運用。

案例簡介：固定區(qū)域循環(huán)播放一組幻燈片，圓形分頁標簽隨著播放不同的圖片，而對應改變樣式。

案例效果：

以下是輪番圖的制作流程，請慢慢食用哦。

Axure RP 8 教程 – 用動態(tài)面板實現(xiàn)輪番圖

1.將動態(tài)面板拉到操作區(qū)中。

2.，雙擊動態(tài)面板，添加五個狀態(tài)，并給動態(tài)面板名稱命名為“輪番圖”。

3.雙擊狀態(tài)，以狀態(tài)1為例，進入狀態(tài)1編輯界面，將元件區(qū)的圖片拖到動態(tài)面板框內，雙擊圖片圖標添加本地準備好的圖片。

4.按照添加狀態(tài)1圖片的方式，為其他四個狀態(tài)添加圖片，一個狀態(tài)一張，添加完畢五張圖片，在大綱頁面可以看到。

5.將元件庫里的方框拖進來，改成圓形縮小。

6.在這個圓形的屬性界面設置選中狀態(tài)（設置填充顏色為灰色），勾選下方的“選中”（只有Tag1需要勾選“選中”，其他不需要），并且制定選擇組“tag”，復制這個圓形，復制成五個之后，為這幾個命名為“tag1”~“tag5”。

7.全部選中，一起命名為tag,目的是保證這五個有且僅有一個被選中。

8.為載入時設置用例，實現(xiàn)輪番效果（循環(huán)播放效果）。

9.為動態(tài)面板“輪番圖”的狀態(tài)切換設置用例。

為用例添加判斷，判斷面板狀態(tài)“輪番圖”=狀態(tài)1。

設置該條件下的動作應該為“選中”tag1為真。

10.其他用例按照和用例1相同的方式設置，只是每一個用例對應的狀態(tài)和圖形不一樣，最后設置完畢應該為下圖所示。

11.收工后預覽效果如下圖所示

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

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