本章介紹如何使用指針函數(shù)實(shí)現(xiàn)側(cè)邊的菜單滑動(dòng)，該效果廣泛應(yīng)用于各類APP的菜單滑動(dòng)。

案例簡(jiǎn)介

單擊功能按鈕時(shí)，打開(kāi)側(cè)邊菜單；向左快速拖動(dòng)菜單時(shí)，關(guān)閉側(cè)邊菜單；菜單也可以通過(guò)從屏幕邊緣向右邊快速拖動(dòng)，打開(kāi)菜單；緩緩?fù)蟿?dòng)時(shí)，如果拖動(dòng)距離小于菜單寬度的一半，菜單收回；否則，菜單打開(kāi)。

案例效果

以下是詳細(xì)的操作步驟，請(qǐng)慢慢食用哦。

Axure RP 8 教程 ：數(shù)字與指針函數(shù)之開(kāi)關(guān)側(cè)邊菜單

1. 拖動(dòng)圓角矩形和方框到操作區(qū)，方框矩形內(nèi)嵌在圓角矩形內(nèi)，當(dāng)作手機(jī)外殼，并且拖入充當(dāng)內(nèi)容的圖片（此處選擇網(wǎng)易云音樂(lè)的界面做例子）。

（記住內(nèi)嵌方框矩形的坐標(biāo) ? X：185 ? ?Y：59）

2. 拖入動(dòng)態(tài)面板到操作區(qū)，當(dāng)作滑動(dòng)菜單，并且為狀態(tài)一添加充當(dāng)內(nèi)容的菜單圖片。

（記住動(dòng)態(tài)面板的坐標(biāo) ? X：185 ? ?Y：59）

為動(dòng)態(tài)面板的狀態(tài)添加圖片。

添加側(cè)邊收縮菜單。

3. 拖入圖像透明的熱區(qū)充當(dāng)功能按鈕，并且為此熱區(qū)添加用例，當(dāng)點(diǎn)擊時(shí)，側(cè)邊菜單滑動(dòng)到方框頁(yè)面矩形的位置。

4. 設(shè)置動(dòng)態(tài)面板動(dòng)作“移動(dòng)”，線形移動(dòng)到絕對(duì)位置 ?{x}427 {y}57（此處位置應(yīng)該與內(nèi)嵌方框矩形坐標(biāo)一樣，坐標(biāo)默認(rèn)為左上角定點(diǎn)）

5. 為動(dòng)態(tài)面板的“結(jié)束拖放動(dòng)態(tài)面板”事件添加兩個(gè)用例條件，選中“全部”保證只有在滿足兩個(gè)條件的時(shí)候才會(huì)觸發(fā)用例，該條件實(shí)現(xiàn)的效果為慢速拖動(dòng)且不超過(guò)動(dòng)態(tài)面板一半距離的時(shí)候收起側(cè)邊菜單。

• if “[[DragTime]]” ≥ “200”
• “[[This.x]]” ≦ “306”

6. 再添加完用例1的條件后，繼續(xù)為動(dòng)態(tài)面板的“結(jié)束拖放動(dòng)態(tài)面板”事件添加用例1，設(shè)置動(dòng)作“移動(dòng)”，即線形移動(dòng)動(dòng)態(tài)面板到絕對(duì)位置（此位置為動(dòng)態(tài)面板一開(kāi)始放置的位置）.

• ? ? {x}185
• ? ? {y}57

7. 繼續(xù)為動(dòng)態(tài)面板的“結(jié)束拖放動(dòng)態(tài)面板”事件添加用例2，而用例2的條件自動(dòng)變?yōu)椋‥lse if true），此條件時(shí)相對(duì)于條件1生成的。

8. 為動(dòng)態(tài)面板的“向左滑動(dòng)時(shí)”事件添加用例條件 ?if“[[DragTime]]”<“200” (拖拽時(shí)間少于200毫秒，用于實(shí)現(xiàn)快速拖動(dòng)直接滑到頂端的效果)，并且設(shè)置”移動(dòng)”，即動(dòng)態(tài)面板線性移動(dòng)到絕對(duì)位置

• ? ?{x}185
• ? ?{y}57

9. 同理為動(dòng)態(tài)面板的“向右滑動(dòng)時(shí)”事件添加用例條件和設(shè)置動(dòng)作。

10. 為動(dòng)態(tài)面板的“拖動(dòng)動(dòng)態(tài)面板時(shí)”設(shè)置動(dòng)作“移動(dòng)”，確定沿水平移動(dòng)的左右邊界“185”~“669”（根據(jù)185加上兩個(gè)動(dòng)態(tài)面板的寬度確定的范圍邊界，此時(shí)的185為動(dòng)態(tài)面板的起始位置）。

11. 完成后對(duì)比一下用例（坐標(biāo)數(shù)值都是按照最初的坐標(biāo)修改的，如果起始坐標(biāo)和我的起始坐標(biāo)不一樣的話，大家可以自行計(jì)算）

12. 最后偷個(gè)懶，找一黑一白兩個(gè)矩形把動(dòng)態(tài)面板蓋?。ㄓ秒[藏效果可能不是那么直觀）

13. 收工

14. 預(yù)覽效果（大家可以愉快的拖動(dòng)側(cè)邊菜單哦）

本文由 @Arthur 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議