什么是動態面板

動態面板是Axure的高級交互元件，由不同的狀態面板組成，是我們制作交互過程中運用頻率最高的元件，很多交互效果需要依賴動態面板實現。動態面板的狀態面板就像是一個容器，我們可以在里面放置任何東西，自由發揮我們的設計創意，甚至是為面板中的設計元素添加交互事件，這一切就好像是在一個新的畫布當中進行頁面設計。

添加動態面板

在Axure中我們有兩種方法添加動態面板。

方法一：從Default元件庫直接拖拽動態面板元件至設計區域。

方法二：選中需要轉換的目標元件，鼠標右鍵單擊選擇操作命令【轉換為動態面板】。

編輯動態面板

動態面板是由不同的狀態組成，每一個狀態里面都可以包含多個元件。同一時間，動態面板只能顯示一個狀態，通過控制這些面板的顯示狀態，可以實現很多豐富的交互效果。

編輯動態面板狀態：雙擊動態面板選擇狀態進行編輯，進入狀態面板中，我們會看到中間有一個虛線框，虛線框內部為設計區域。我們的設計工作就是在這個虛線框內部完成，我們可以通過改變動態面板的尺寸來調整虛線框的大小。

管理動態面板狀態：雙擊動態面板進入狀態編輯模式，點擊設計區域上方可以管理動態面板的狀態，在這里可以增加狀態、復制狀態、刪除狀態。

隔離模式：默認情況下，動態面板的狀態就像一個封閉的黑盒，將動態面板與外面的世界進行了隔離，在這個盒子當中看不到外在的東西。當我們點擊狀態面板右上角的隔離按鈕，這個封閉的黑盒將變成透明的黑子，可以看到動態面板以外的設計元素，但這個盒子依舊是封閉的，對于動態面板以外的設計元素，我們只能查看，不能進行操作。

關閉狀態：點擊狀態面板右上角的關閉按鈕，則退出動態面板狀態，回到頁面視角。

動態面板樣式

滾動條：當動態面板尺寸小于內容尺寸時，需要為動態面板設置滾動條以便查看完整內容。滾動條有四種樣式設置，包含：禁止滾動、按需滾動、垂直滾動和水平滾動。選中動態面板，在右側樣式面板中下拉選擇滾動條樣式。

100%寬度：選擇此項后，在瀏覽中查看原型時，動態面板的寬度將自適應瀏覽器寬度，不會出現水平滾動條，一般用于通欄設計。需要注意的是動態面板的內容寬度要大于瀏覽器的寬度。選中動態面板，可以通過右側的樣式面板進行設置。

固定到瀏覽器：始終固定在窗口的某個特定位置，如App的底部導航，資訊類產品的頂部標簽導航都可以利用“固定到瀏覽器”的樣式效果。選中動態面板，點擊右側樣式面板的“固定到瀏覽器”，勾選固定到瀏覽器窗口，選擇固定位置的方向，設置邊距，勾選保持在前面(將動態面板圖層置頂)。

動態面板事件

動態面板作為Axure的高級元件，有一些自己專有的交互事件，如：動態面板狀態改變時、拖動時、拖動結束時、向左/右/上/下拖動結束時、滾動時、向上滾動時、向下滾動時。

01狀態改變時

該事件是由“設置面板狀態”動作觸發的。這個事件常用于需要進行不停改變面板狀態的一連串交互動作，如輪播圖的循環播放。

02拖動事件

拖動時、向左/右/上/下拖動結束時，允許我們針對拖動過程中，拖動結束后設置不同的交互，其中拖動結束后還可以根據拖動的方向設置不同的交互。如果你有拖動方面的需求，可以將這些需要拖動的元件或元件組合轉換為動態面板。

拖動時：用于面板的拖動過程中。

向左拖動結束時：面板向左拖動，且完成拖動動作。

向右拖動結束時：面板向右拖動，且完成拖動動作。

向上拖動結束時：面板向上拖動，且完成拖動動作。

向下拖動結束時：面板向下拖動，且完成拖動動作。

03滾動事件

滾動時、向上滾動時、向下滾動時，允許我們針對滾動過程中，不同的滾動方向設置不同的交互。我們希望向上或向下滾動時，顯示不同的內容，這個時候我們就可以將這些有滾動需求的元件轉換為動態面板。有些時候，還需要根據滾動的距離顯示不同的頁面或內容。

---

交互案例

案例1：進度條加載

1. 在設計區域中添加一個動態面板，命名為“狀態指示器”，為動態面板添加兩個空狀態。

2. 添加兩個相同尺寸的矩形，將其中一個矩形填充為橙色，并與另一個矩形重合對其。將橙色矩形轉換為動態面板，命名為“進度條”，將進度條動態面板的寬度設置為1，另外一個矩形命名為“背景”。

3.點擊頁面空白處，點擊【新建交互】按鈕，選擇【頁面載入時】事件，添加動作【設置面板狀態】，設置狀態指示器向后循環切換，循環間隔100毫秒。

4. 選中狀態指示器動態面板，點擊【新建交互】按鈕，選擇事件【狀態改變時】，添加動作【設置尺寸】，為“進度條”動態面板設置尺寸，寬度尺寸設置為[[LVAR2.width+LVAR1.width/100]]，其中LVAR1為背景，LVAR2為進度條動態面板，如下圖所示，高度設置為進度條動態面板的高度。點擊添加情形，設置邏輯條件，當進度條寬度小于背景寬度，執行剛才的【設置尺寸】動作，設置如下圖所示。

5. 選中狀態指示器動態面板，為指示器添加添加第二個情形，添加動作【設置面板狀態】，將狀態指示器設置為停止循環。

6. 拖動文本標簽至設計區域，命名為“百分比”。選中進度條動態面板，點擊【新建交互】按鈕，添加【尺寸改變時】事件，添加【設置文本】動作。設置百分比文本的內容為[[Math.floor(LVAR1.width/LVAR2.width*100)]]%，其中LVAR1為進度條，LVAR2為背景。Math.floor為向下取整函數，獲取小于等于指定數值的最大整數。

7. 設置完畢，點擊預覽按鈕，在瀏覽器中查看原型。

案例2：音量調節器

1. 從元件庫拖動喇叭圖標、矩形、圓至設計區域，為矩形和圓設置填充色，調整好矩形和圓的尺寸，調整時，注意圓的高度大于矩形的高度。將矩形命名為“音量桿”。

2. 選中圓，鼠標右鍵單擊選擇命令“轉換為動態面板”，動態面板命名為“調節球”。選中動態面板，點擊【新建交互】按鈕，選擇【拖動時】事件，選擇【移動】動作，設置調節球沿水平直線移動，設置調節球移動邊界，左側大于音量桿的水平坐標，右側小于音量桿的水平坐標+音量桿的寬度。移動邊界的表達式為左側>[[LVAR1.x]]，右側＜[[LVAR1.x+LVAR1.width]]，其中變量LVAR1為音量桿。

3. 設置完畢，點擊預覽按鈕，在瀏覽器中查看原型。

案例3：輪播圖

1. 拖拽動態面板元件至設計區域，雙擊動態面板，進入編輯狀態。為面板添加3個狀態，并且為每個狀態分別導入一張同樣尺寸的圖片。

2. 選中動態面板，點擊【新建交互】按鈕，選擇【載入時】事件，選擇【設置面板狀態】動作。選擇當前元件，狀態設置為下一項，勾選向后循環，進入和退出動畫選擇向左滑動，動畫時間為500毫秒，循環間隔設置為2000毫秒，點擊“完成”按鈕。

3. 設置完畢，點擊預覽，在瀏覽器中查看原型

---

寫在末尾

感謝大家的耐心閱讀，如果你有興趣學習原型設計或Axure交互設計，不妨關注下我的新書《Axure RP9實用教程：原型+高保真+交互+設計》馬上就要上市了，這是我十年來作為產品經理的實戰經驗總結。這本書由淺入深講解了Axure RP9的基礎功能，講解過程中結合具體的案例幫助大家加深對元件交互功能的理解。最后兩個章節，都是滿滿的干貨案例，旨在通過具體的元件交互案例和頁面制作案例，幫助大家找到Axure RP9的交互使用場景，同時也是檢查并鞏固理論學習的過程。讀完這本書，你一定能夠輕松駕馭Axure這款工具的使用，絕對物超所值。下圖是本書的封面及目錄結構。

本書在京東商城、當當網均有銷售，當然您也可以關注我的專欄學習Axure RP9教程。

總結

以上是生活随笔為你收集整理的xcode动态改变窗口大小_详细的理论要点+3个经典案例，帮助你深入理解动态面板...的全部內容，希望文章能夠幫你解決所遇到的問題。

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