動態面板（Dynamic Panel）是Axure的核心功能之一，但很多初學者都反饋理解有難度，今天用一個簡單的例子讓大家快速掌握它，并且學會做一個常用的輪播圖。

12月21日更新：B站視頻版教程：

Axure動態面板快速入門，輪播圖效果_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili?www.bilibili.com

---

首先理解一個概念：什么是動態面板？用來做什么？

動態面板就是多個頁面按照“狀態劃分”合成一個元件，然后通過某種“動作”驅動展示。

這張圖是Axure中動態面板的圖標，非常貼切。

有三個狀態（states）的面板“灰黑藍”，通過動作（Action）來控制具體展示哪個狀態。

所以：動態面板 = 狀態面板 + 動作

案例開始：Banner輪播圖

一、添加基本元件

1.在左側工具欄拖動一個動態面板進入編輯區，并命名為“banner”

2.添加五個操作按鈕，放在動態面板上，也可以適當美化一下效果，底部三個按鈕變成原型，側邊的變成矩形，并調整透明度看起來更真實。

二.設置面板狀態

1.雙擊動態面板元件，彈出動態面板設置彈窗，這里可以看到我們的動態面板有三個狀態（state），我們在這里可以添加狀態，也可以編輯狀態。

這里我們雙擊選擇State1，對State1進行編輯。

2.進入到state1的編輯狀態下，我們可以看到，標題的tab名稱變了，變成了banner/State1，這個代表banner動態面板下的State1狀態，在這個狀態下，編輯的內容只屬于這個狀態，與其他狀態和外部的其他控件無關。

我們簡單編輯下，編一個背景顏色，增加一個文字說明，用這個當做第一個banner圖。

三、添加動作（底部按鈕）

1、首先為底部“123”按鈕添加頁面切換，選中1號按鈕，雙擊右側的onClick事件

2、在彈出的事件編輯器中選擇，Widgets-->Set Panel State，在右側的“動作設置”欄中選中設置面板，并確認一下下放的Select state是否為State1（第一個頁面），最后點擊OK。

3、同樣的操作，設置按鈕2為state2，設置按鈕3為state3，設置完可以預覽下效果。

點擊123按鈕分別可以切換三張不同的banner。

三、添加動作（左右切換按鈕）

1、接下來我們為左右按鈕添加動作，先選中右側箭頭按鈕【>】，添加一個onClick事件。

2、彈出的事件編輯器中，依次選擇SetPanelState，勾選Set banner state ，然后在Select State中點擊右側的下拉菜單，選擇Next，代表每點擊一次按鈕，切換到下一個狀態面板。

3、同樣的操作，再設置一遍左側的翻頁按鈕【<】，在彈出的編輯器中設置Select state為Previous（上一頁）。

設置完我們可以預覽下效果，點擊左右按鈕可以切換頁面了。

至此，動態面板的基礎操作介紹完畢，簡單總結一下，

動態面板的核心作用是：通過事件控制，讓面板里展示不同的頁面內容。

使用步驟：

1、添加“動態面板”元件和用來產生action的按鈕

2、為動態面板設置每個state為不同內容

3、為按鈕設置切換action，控制展示不同的頁面

---

四、面板切換動畫（左右翻頁按鈕）

剛才我們完成了基本的動態面板切換，但是還不夠完美，頁面的切換還比較生硬，缺乏用戶體驗，作為一名產品經理怎么能允許這種情況發生呢，下面我們來加入切換動畫。

（這部分會涉及到事件相關知識，如果看不懂請查看本人其他文章）

1、首先為左右翻頁按鈕設置面板切換動畫

選中按鈕【>】，雙擊右側已經添加的事件，進入事件編輯器。

2、在事件編輯器的右下角，修改Animate In的動畫效果，設置為【slide left】（左滑）。

3、同樣，在按鈕【<】中設置Animate In的動畫效果，設置為【slide right】（右滑）。

設置完后我們可以預覽下效果，點擊左右按鈕，頁面滑動流暢多了吧~

五、面板切換動畫（123頁數按鈕）

最后我們為底部的123頁數按鈕添加翻頁動畫效果，由于這里涉及到一些小的邏輯和變量的只是，稍微有些復雜，看不懂的同學請參考本人其他文章。

我們首先分析一下，123按鈕的動畫切換邏輯：

每次切換動畫要根據上一個頁面的值來判斷

①上一個頁面為state1時，點擊按鈕2，頁面應該“向左滑”

②上一個頁面為state2時，點擊按鈕1，頁面應該“向右滑”

所以這里我們要做兩件事情：

1、記錄每次頁面切換后的state值（這里我們用自帶的全局變量onLoadVariable記錄）

2、每個case中增加對state值的判斷，根據不同的值顯示不同的動畫。

下邊開始操作：

1、使用onLoadVariable記錄每個頁面的state值，這里我們假設state1~3分別是1~3

為按鈕1~3分別添加一個動作Set Variable Value，三個按鈕分別設置value為1,2,3，這樣點擊這三個按鈕后，就可設置變量為對應的值。

【效率提高】：

在設置三個按鈕時，為了快速操作，可以使用“事件復制”功能，使用方法如下。

在做好的一個事件上點擊鼠標右鍵，然后選擇Copy，在目標事件上再選擇Paste。

（win操作系統下，ctrl+c，ctrl+v也是可以的，但要注意粘貼后修改對應的值。）

2、為每個按鈕增加case條件判斷，選中按鈕1，雙擊右側的case1

3、彈出的“事件對話框”中，點擊按鈕【add condition】添加條件判斷。

事件對話框

4、彈出的“條件對話”框中，依次如下操作：

①點擊【+】添加一個判斷條件

②選擇判斷類型為【value of variable】然后選擇【OnLoadVariable】

③選擇判斷依據為【is greater than】，后邊的value設置為1

條件對話框

設置完畢后，點擊ok按鈕，保存，這時我們回到 事件編輯器中就可以看到case1下方增加了一些描述信息，這個就是代表這個case的條件（當變量OnLoadVariable>1時）

變量大于1時，我們希望頁面切換是向右滑動的，所以接下來設置一下向右滑動。

點擊之前已經設定好的set banner to state，增加一個動畫。

同樣的，我們設置按鈕2和按鈕3，按鈕3模式的模式和按鈕1一樣，這里不再重復。

這里要注意的是按鈕2，它的條件中既有大于2，又有小于2，所以需要添加兩個case

（使用復制粘貼簡單修改一下值即可，修改后如下圖，按鈕2的兩個case）

至此，底部按鈕的切換操作完成了，可以點擊預覽運營一下試試，是不是很完美了？

其實還有問題，就是左右按鈕切換+底部翻頁按鈕配合的時候會有問題，因為左右按鈕并未設定state變量的值，我們把它設定上即可。

打開【>】按鈕的事件編輯器，添加事件【Set Variable Value】，在右側勾選，并在右下角選擇value為[[OnLoadVariable+1]]，（每次點擊按鈕變量自動+1）。

【<】按鈕同樣設置，函數value值變為-1即可。

最后運行一下，banner切換非常完美，大功告成。

喜歡請點贊支持~~

---------------------------------

Axure快速入門系列教程：

Song：如何自學Axure（0基礎入門教程）

Song：Axure動態面板（快速入門+輪播圖案例）

Song：Axure動態面板（上下左右滑動頁面）

Song：Axure母版使用技巧（效率提升100%）

Song：Axure 元件庫 Bootstrap4（超實用）

Song：Axure中繼器（快速入門+交互案例）

總結

以上是生活随笔為你收集整理的axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）的全部內容，希望文章能夠幫你解決所遇到的問題。

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