本章介紹如何使用指針函數實現側邊的菜單滑動，該效果廣泛應用于各類APP的菜單滑動。

案例簡介

單擊功能按鈕時，打開側邊菜單；向左快速拖動菜單時，關閉側邊菜單；菜單也可以通過從屏幕邊緣向右邊快速拖動，打開菜單；緩緩拖動時，如果拖動距離小于菜單寬度的一半，菜單收回；否則，菜單打開。

案例效果

以下是詳細的操作步驟，請慢慢食用哦。

Axure RP 8 教程 ：數字與指針函數之開關側邊菜單

1. 拖動圓角矩形和方框到操作區，方框矩形內嵌在圓角矩形內，當作手機外殼，并且拖入充當內容的圖片（此處選擇網易云音樂的界面做例子）。

（記住內嵌方框矩形的坐標 ? X：185 ? ?Y：59）

2. 拖入動態面板到操作區，當作滑動菜單，并且為狀態一添加充當內容的菜單圖片。

（記住動態面板的坐標 ? X：185 ? ?Y：59）

為動態面板的狀態添加圖片。

添加側邊收縮菜單。

3. 拖入圖像透明的熱區充當功能按鈕，并且為此熱區添加用例，當點擊時，側邊菜單滑動到方框頁面矩形的位置。

4. 設置動態面板動作“移動”，線形移動到絕對位置 ?{x}427 {y}57（此處位置應該與內嵌方框矩形坐標一樣，坐標默認為左上角定點）

5. 為動態面板的“結束拖放動態面板”事件添加兩個用例條件，選中“全部”保證只有在滿足兩個條件的時候才會觸發用例，該條件實現的效果為慢速拖動且不超過動態面板一半距離的時候收起側邊菜單。

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

6. 再添加完用例1的條件后，繼續為動態面板的“結束拖放動態面板”事件添加用例1，設置動作“移動”，即線形移動動態面板到絕對位置（此位置為動態面板一開始放置的位置）.

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

7. 繼續為動態面板的“結束拖放動態面板”事件添加用例2，而用例2的條件自動變為（Else if true），此條件時相對于條件1生成的。

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

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

9. 同理為動態面板的“向右滑動時”事件添加用例條件和設置動作。

10. 為動態面板的“拖動動態面板時”設置動作“移動”，確定沿水平移動的左右邊界“185”~“669”（根據185加上兩個動態面板的寬度確定的范圍邊界，此時的185為動態面板的起始位置）。

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

12. 最后偷個懶，找一黑一白兩個矩形把動態面板蓋?。ㄓ秒[藏效果可能不是那么直觀）

13. 收工

14. 預覽效果（大家可以愉快的拖動側邊菜單哦）

本文由 @Arthur 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議