AxureRP教程–動態面板高級應用

顧名思義，這個交互事件是用來設置動態面板的二維座標位置的，應用頻率較高，在需要更改某部分內容的位置時，都需要使用這個功能，與AxureRP的其他功能配合使用，如變量等，會做出很多效果。本文是一篇關於動態面板高級應用的文章。我們一起來了解下，希望對您有所幫助。

前面介紹了動態面板的基本應用，通過設定不同的狀態頁面和按鈕的單擊事件，來完成小頁面切換的效果，適用於TAB標籤，圖片輪換等效果。前面只應用到了動態面板的一個交互事件，即切換動態面板的顯示狀態，不過這也是最常應用到得狀態，本文介紹動態面板的其他幾種交互事件，包括顯示動態面板，隱藏動態面板，切換動態面板可見屬性，移動動態面板和將動態面板置為最前。

在主頁面上添加兩個動態面板，一個為有產品，活動，新聞三個狀態的動態面板Paneltest，一個為只設置一個測試狀態的Paneltest2，分別做好初始化的設置，並將Paneltest2的默認顯示設置為隱藏。

　　顯示動態面板，隱藏動態面板和切換動態面板可見屬性

前面兩項在動態面板的自身屬性裏面就能設置，在已添加的動態面板上右鍵—編輯動態面板，可看到設為可見和設為隱藏兩個選項。這三項交互事件都是用來設置動態面板是否可見的，第三項就是當動態面板隱藏時將其設為可見，當動態面板可見時將其設置為隱藏，設置比較簡單，選擇了交互事件後再選擇目標動態面板即可，不做過多介紹，一般應用在設置隱藏菜單，隱藏交互效果上，如隱藏的下拉式表單，隱藏的交互式提醒等。

　　將動態面板置為最前

這個與設置動態面板的可見屬性有點類似，用來設置動態面板的顯示層級，在同一片區域內有多部分內容重疊的時候，就可以用這個交互事件來設置當前的最頂層顯示，這個設置也比較簡單，選擇好目標動態面板即可，一般應用不多，設計頁面的時候不會有太多重疊內容，設置日期控件的時候會碰到，帶選擇日期功能的，另一種可能情況就是需要有覆蓋功能的。

　　移動動態面板

顧名思義，這個交互事件是用來設置動態面板的二維座標位置的，應用頻率較高，在需要更改某部分內容的位置時，都需要使用這個功能，與AxureRP的其他功能配合使用，如變量等，會做出很多效果。移動動態面板分定位(to(x,y))和位移(by(x,y))兩種，前者依據AxureRP自帶的標尺來精確定位，後者則是根據設定的位移值來上下左右移動，都以像素為單位。設置時先選擇目標動態面板，再選擇移動方式，最後設置移動座標或位移值。常見應用於流水線式的動態效果，抽屜式交互效果，可伸縮式導航菜單等，如常見的循環滾動展示效果，可用於圖片展示。

　　Example1-延時移動

這個是例子是演示通過一個開關的控制，使設置頁面是否展示出來的效果，動態面板會逐漸移動來實現延時的'效果，首先設計一個設置頁面，比如添加兩個複選框組件設置複選功能，再添加一個動態面板覆蓋在設置頁面上，並設置一個狀態頁面，上面為提示性文字，再添加一個動態面板作為開關，設置兩個狀態，一個為打開設置，一個為關閉設置，這裏也可以用按鈕來控制，為了增加開關的可切換效果，採用了動態面板。

初始化完成之後，設置開關的交互事件，分別選擇移動動態面板，其中“打開設置”是使面板向下移動，“關閉設置”是使面板向上移動，這裏採用位移的方式，需要注意的是，AxureRP的畫布上標尺是朝右下的座標軸，因此向下移動是正值，向上移動是負值。這裏也可以用定位的方式做，不過會比位移的方式複雜很多，需要計算當前座標。

其實也可以用是否將面板設置為最前來達到相同的效果，即將設置頁面也做成一個動態面板中的一個狀態頁 ，然後通過切換是否前置來完成效果，不過這樣就沒有延時的效果了。

　　Example2-抽屜效果

這個例子的實現原理與第一個例子差不多，是別人製作分享的，這裏拿來舉個例子，有興趣的可以自己看源文件。