怎么制作動態效果的后臺導航欄呢，一起來文中看看~

先上完成效果：

整體的制作過程

1. 制作菜單元件

分別制作導航菜單中的每個元件，制作好一個以后，就可以復用了，制作步驟如下：

1. 使用矩形，制作單個導航菜單的底層
2. 使用圖片，制作導航菜單的圖標
3. 使用矩形，設置成三角形，制作導航菜單的二級菜單的顯示隱藏標識

制作三角形的步驟：選擇矩形，右鍵選擇彈出來的菜單中的——變換形狀，選擇三角形。

2. 制作菜單

將制作好的菜單元件組合成一個整體的導航菜單元件

（1）改變三角形的大小為16*16

（2）分別制作：一級無下級菜單，一級有下級的菜單，二級菜單

（3）組合菜單，以制作一級有下級的菜單為例：選中圖片、三角形、矩形、右鍵、彈出菜單、選擇組合。（一級無下級菜單同樣操作組合）

（4）制作二級菜單動態效果，選中二級菜單，在交互中，添加選中效果，設置選中后的背景顏色變更為#19a2dd。添加交互：單擊時——設置選中——當前文件。重點，重點，給二級菜單設置選項組team2（選項組名字自定義）。

（5）制作一級菜單動態效果。給一級菜單組中的三角形添加一個名字：sanjiao（這個名字可以自定義）。選中一級菜單組，在交互中，添加交互：單擊時——旋轉——sanjiao——順時針——過——180°。

重點，重點，給一級菜單設置選項組team1（選項組名稱自定義）

3. 制作導航欄底層元件（這個沒什么好說的，直接看圖）

4. 制作導航菜單

自由組合一級，二級菜單，如圖。組合時，一定要確保每個菜單中的距離大于等于0，千萬不能小于0，注意，注意，注意。

（1）將財務管理下的四個二級菜單選中，右鍵彈出菜單，選擇轉換為動態面板，并設置動態面板名稱（財務管理，這里可以自定義設置）。人員管理，系統設置如法炮制。

（2）給一級菜單的單擊時的交互添加動作。以財務管理為例：添加顯示/隱藏（交互），目標選擇動態面板財務管理，選擇切換；顯示動畫選擇向下滑動——300毫秒，隱藏動畫選擇向上滑動——300毫秒；重點，重點，重點，更多選項中，選擇推動和拉動元件——下方——線性——300毫秒。人員管理，系統設置如法炮制。

最后，把菜單捏在一起，OK了。大功告成，可以自己玩玩了。

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

題圖來自Unsplash，基于CC0協議