古詩詞大全網 - 個性簽名 - AxureRP教程–動態面板高級應用

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

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

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

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

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

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

 將動態面板置為最前

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

 移動動態面板

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

 Example1-延時移動

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

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

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

 Example2-抽屜效果

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