動態面板：能夠在一個固定的區域切換顯示的內容。能實現很多動態效果。

其本身是一個透明的元件。一個動態面板里有若干個【狀態】。“若動態面板是幻燈片的放映機，而狀態則是幻燈片。” 打開狀態的編輯界面，即可放置各種各樣的元件，組成內容。

有幾種特性：容器、多狀態、拖動、循環、適應寬度、相對固定。

動態面板-容器：能夠讓裝載的內容有統一的動作。實現多個元件的統一移動或現實隱藏。

場景一：登錄面板的燈箱效果

1. 準備工作

制作背景圖，預想點擊【下載PSD】則彈出【登錄面板】

背景

在空白處制作【登錄面板】，然后全選，右鍵-轉換為動態面板

轉換為動態面板

把【登錄面板】放在【背景圖】中間，并【置于頂層】，勾選【隱藏】

登錄面板

2. 熱區

把熱區拖到按鈕位置，并添加用例【鼠標單擊時】-【顯示】- 選擇LoginPanel -【燈箱效果】

添加用例

在動態面板LoginPanel中的關閉按鈕添加用例【鼠標單擊時】-【隱藏】- 選擇LoginPanel

關閉按鈕

如果想取消動態面板，想增加一些內容的話，選中動態面板-右鍵-從首個狀態中脫離

image.png

其他

只要是多個元件需要統一顯示/隱藏，都能夠用動態面板/組合實現

場景二：水平菜單移入時彈出隱藏效果

1. 準備工作

制作一個“一級菜單”，下方放置數個矩形作為“二級菜單”，并全選【二級菜單】，右鍵，轉換為動態面板，命名為Submenu，狀態為隱藏

菜單

2. 添加用例

選中【一級菜單】，添加用例【鼠標移入時】-【顯示】- 選中動態面板Submenu -【彈出效果】

(彈出效果能夠實現鼠標在一級菜單和二級菜單的范圍內時，二級菜單保持顯示；當鼠標離開，二級菜單自動隱藏)

動畫可自由選擇

添加用例

場景三：垂直菜單單擊時展開，再次單擊時收起

1. 準備工作(與上述場景的準備工作一樣)

2. 添加用例

選中“一級菜單”，添加用例【鼠標單擊時】-【切換可見性】- 選中動態面板 - 勾選【推動/拉動元件】

(推動/拉動元件(以默認的向下為例)：展開二級菜單向下推動其他菜單，收起二級菜單拉起下方其他菜單的效果)

添加用例

3. 預覽

把做好的全選(包括“一級菜單”和“二級菜單”)并復制放在下方

復制

預覽，達到效果

預覽

3. 嘗試

同樣，我嘗試了使用兩個用例想要達到點擊一次【顯示】二級菜單，再點擊一次【隱藏】二級菜單的效果，如下圖

image.png

結果是不行的

預覽

或者一個用例里弄兩個動作，也是不行的。所以一定要用【切換可見性】

image.png

總結

以上是生活随笔為你收集整理的axure rp8 添加动态面板_Axure RP8 | 动态面板-容器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。