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

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

案例效果：

以下是輪番圖的制作流程，請(qǐng)慢慢食用哦。

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

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

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

3.雙擊狀態(tài)，以狀態(tài)1為例，進(jìn)入狀態(tài)1編輯界面，將元件區(qū)的圖片拖到動(dòng)態(tài)面板框內(nèi)，雙擊圖片圖標(biāo)添加本地準(zhǔn)備好的圖片。

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

5.將元件庫(kù)里的方框拖進(jìn)來(lái)，改成圓形縮小。

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

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

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

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

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

設(shè)置該條件下的動(dòng)作應(yīng)該為“選中”tag1為真。

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

11.收工后預(yù)覽效果如下圖所示

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

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