- 相關(guān)推薦
AxureRP教程–動(dòng)態(tài)面板高級(jí)應(yīng)用
顧名思義，這個(gè)交互事件是用來(lái)設(shè)置動(dòng)態(tài)面板的二維坐標(biāo)位置的，應(yīng)用頻率較高，在需要更改某部分內(nèi)容的位置時(shí)，都需要使用這個(gè)功能，與AxureRP的其他功能配合使用，如變量等，會(huì)做出很多效果。本文是一篇關(guān)于動(dòng)態(tài)面板高級(jí)應(yīng)用的文章。我們一起來(lái)了解下，希望對(duì)您有所幫助。
前面介紹了動(dòng)態(tài)面板的基本應(yīng)用，通過(guò)設(shè)定不同的狀態(tài)頁(yè)面和按鈕的單擊事件，來(lái)完成小頁(yè)面切換的效果，適用于TAB標(biāo)簽，圖片輪換等效果。前面只應(yīng)用到了動(dòng)態(tài)面板的一個(gè)交互事件，即切換動(dòng)態(tài)面板的顯示狀態(tài)，不過(guò)這也是最常應(yīng)用到得狀態(tài)，本文介紹動(dòng)態(tài)面板的其他幾種交互事件，包括顯示動(dòng)態(tài)面板，隱藏動(dòng)態(tài)面板，切換動(dòng)態(tài)面板可見(jiàn)屬性，移動(dòng)動(dòng)態(tài)面板和將動(dòng)態(tài)面板置為最前。
在主頁(yè)面上添加兩個(gè)動(dòng)態(tài)面板，一個(gè)為有產(chǎn)品，活動(dòng)，新聞三個(gè)狀態(tài)的動(dòng)態(tài)面板Paneltest，一個(gè)為只設(shè)置一個(gè)測(cè)試狀態(tài)的Paneltest2，分別做好初始化的設(shè)置，并將Paneltest2的默認(rèn)顯示設(shè)置為隱藏。
顯示動(dòng)態(tài)面板，隱藏動(dòng)態(tài)面板和切換動(dòng)態(tài)面板可見(jiàn)屬性
前面兩項(xiàng)在動(dòng)態(tài)面板的自身屬性里面就能設(shè)置，在已添加的動(dòng)態(tài)面板上右鍵—編輯動(dòng)態(tài)面板，可看到設(shè)為可見(jiàn)和設(shè)為隱藏兩個(gè)選項(xiàng)。這三項(xiàng)交互事件都是用來(lái)設(shè)置動(dòng)態(tài)面板是否可見(jiàn)的，第三項(xiàng)就是當(dāng)動(dòng)態(tài)面板隱藏時(shí)將其設(shè)為可見(jiàn)，當(dāng)動(dòng)態(tài)面板可見(jiàn)時(shí)將其設(shè)置為隱藏，設(shè)置比較簡(jiǎn)單，選擇了交互事件后再選擇目標(biāo)動(dòng)態(tài)面板即可，不做過(guò)多介紹，一般應(yīng)用在設(shè)置隱藏菜單，隱藏交互效果上，如隱藏的下拉式表單，隱藏的交互式提醒等。
將動(dòng)態(tài)面板置為最前
這個(gè)與設(shè)置動(dòng)態(tài)面板的可見(jiàn)屬性有點(diǎn)類似，用來(lái)設(shè)置動(dòng)態(tài)面板的顯示層級(jí)，在同一片區(qū)域內(nèi)有多部分內(nèi)容重疊的時(shí)候，就可以用這個(gè)交互事件來(lái)設(shè)置當(dāng)前的最頂層顯示，這個(gè)設(shè)置也比較簡(jiǎn)單，選擇好目標(biāo)動(dòng)態(tài)面板即可，一般應(yīng)用不多，設(shè)計(jì)頁(yè)面的時(shí)候不會(huì)有太多重疊內(nèi)容，設(shè)置日期控件的時(shí)候會(huì)碰到，帶選擇日期功能的，另一種可能情況就是需要有覆蓋功能的。
移動(dòng)動(dòng)態(tài)面板
顧名思義，這個(gè)交互事件是用來(lái)設(shè)置動(dòng)態(tài)面板的二維坐標(biāo)位置的，應(yīng)用頻率較高，在需要更改某部分內(nèi)容的位置時(shí)，都需要使用這個(gè)功能，與AxureRP的其他功能配合使用，如變量等，會(huì)做出很多效果。移動(dòng)動(dòng)態(tài)面板分定位(to(x,y))和位移(by(x,y))兩種，前者依據(jù)AxureRP自帶的標(biāo)尺來(lái)精確定位，后者則是根據(jù)設(shè)定的位移值來(lái)上下左右移動(dòng)，都以像素為單位。設(shè)置時(shí)先選擇目標(biāo)動(dòng)態(tài)面板，再選擇移動(dòng)方式，最后設(shè)置移動(dòng)坐標(biāo)或位移值。常見(jiàn)應(yīng)用于流水線式的動(dòng)態(tài)效果，抽屜式交互效果，可伸縮式導(dǎo)航菜單等，如常見(jiàn)的循環(huán)滾動(dòng)展示效果，可用于圖片展示。
Example1-延時(shí)移動(dòng)
這個(gè)是例子是演示通過(guò)一個(gè)開(kāi)關(guān)的控制，使設(shè)置頁(yè)面是否展示出來(lái)的效果，動(dòng)態(tài)面板會(huì)逐漸移動(dòng)來(lái)實(shí)現(xiàn)延時(shí)的效果，首先設(shè)計(jì)一個(gè)設(shè)置頁(yè)面，比如添加兩個(gè)復(fù)選框組件設(shè)置復(fù)選功能，再添加一個(gè)動(dòng)態(tài)面板覆蓋在設(shè)置頁(yè)面上，并設(shè)置一個(gè)狀態(tài)頁(yè)面，上面為提示性文字，再添加一個(gè)動(dòng)態(tài)面板作為開(kāi)關(guān)，設(shè)置兩個(gè)狀態(tài)，一個(gè)為打開(kāi)設(shè)置，一個(gè)為關(guān)閉設(shè)置，這里也可以用按鈕來(lái)控制，為了增加開(kāi)關(guān)的可切換效果，采用了動(dòng)態(tài)面板。
初始化完成之后，設(shè)置開(kāi)關(guān)的交互事件，分別選擇移動(dòng)動(dòng)態(tài)面板，其中“打開(kāi)設(shè)置”是使面板向下移動(dòng)，“關(guān)閉設(shè)置”是使面板向上移動(dòng)，這里采用位移的方式，需要注意的是，AxureRP的畫(huà)布上標(biāo)尺是朝右下的坐標(biāo)軸，因此向下移動(dòng)是正值，向上移動(dòng)是負(fù)值。這里也可以用定位的方式做，不過(guò)會(huì)比位移的方式復(fù)雜很多，需要計(jì)算當(dāng)前坐標(biāo)。
其實(shí)也可以用是否將面板設(shè)置為最前來(lái)達(dá)到相同的效果，即將設(shè)置頁(yè)面也做成一個(gè)動(dòng)態(tài)面板中的一個(gè)狀態(tài)頁(yè) ，然后通過(guò)切換是否前置來(lái)完成效果，不過(guò)這樣就沒(méi)有延時(shí)的效果了。
Example2-抽屜效果
這個(gè)例子的實(shí)現(xiàn)原理與第一個(gè)例子差不多，是別人制作分享的，這里拿來(lái)舉個(gè)例子，有興趣的可以自己看源文件。
【AxureRP教程–動(dòng)態(tài)面板高級(jí)應(yīng)用】相關(guān)文章：
AxureRP動(dòng)態(tài)面板交互設(shè)計(jì)實(shí)例教程08-06
axure動(dòng)態(tài)面板是否有顯示時(shí)間的功能03-14
Axure彈出動(dòng)態(tài)面板使用方法07-01
PHP高級(jí)教程01-19
AxureRP中Widgets詳解06-22
職稱計(jì)算機(jī)WindowsXP教程：控制面板的使用02-21
AxureRP中Widgets介紹05-11