Axure RP 8 教程 – 用動態面板實現輪番圖
本章主要介紹如何使用動態面板的多狀態切換制作輪番圖,而輪番圖在首頁消息和活動的推送以及APP引導頁有廣泛的運用。
案例簡介:固定區域循環播放一組幻燈片,圓形分頁標簽隨著播放不同的圖片,而對應改變樣式。
案例效果:
以下是輪番圖的制作流程,請慢慢食用哦。
Axure RP 8 教程 – 用動態面板實現輪番圖
1.將動態面板拉到操作區中。
2.,雙擊動態面板,添加五個狀態,并給動態面板名稱命名為“輪番圖”。
3.雙擊狀態,以狀態1為例,進入狀態1編輯界面,將元件區的圖片拖到動態面板框內,雙擊圖片圖標添加本地準備好的圖片。
4.按照添加狀態1圖片的方式,為其他四個狀態添加圖片,一個狀態一張,添加完畢五張圖片,在大綱頁面可以看到。
5.將元件庫里的方框拖進來,改成圓形縮小。
6.在這個圓形的屬性界面設置選中狀態(設置填充顏色為灰色),勾選下方的“選中”(只有Tag1需要勾選“選中”,其他不需要),并且制定選擇組“tag”,復制這個圓形,復制成五個之后,為這幾個命名為“tag1”~“tag5”。
7.全部選中,一起命名為tag,目的是保證這五個有且僅有一個被選中。
8.為載入時設置用例,實現輪番效果(循環播放效果)。
9.為動態面板“輪番圖”的狀態切換設置用例。
為用例添加判斷,判斷面板狀態“輪番圖”=狀態1。
設置該條件下的動作應該為“選中”tag1為真。
10.其他用例按照和用例1相同的方式設置,只是每一個用例對應的狀態和圖形不一樣,最后設置完畢應該為下圖所示。
11.收工后預覽效果如下圖所示
本文由 @Arthur 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自PEXELS,基于CC0協議
評論
評論請登錄
為什么我的下面的圓不會切換 就灰第一個 上面圖片輪番播放下面的圓不動 ?
找到問題了 ??
滑動球寫的不詳細啊,小白只完成了動態圖,滑動球跟著全黑了
哈哈哈哈我也是
為什么我的圈圈不跟著圖片一起變啊
我的球球也不會動啊
大神 滑動球那沒看懂 是設置一個組五個球就完事了是嗎 還有 設置動態面板案列的時候是怎么設置的呢????