全栈工程师?
嗯.....目前并不是!

製作動態效果的後台導航欄——左側導航

怎麼製作動態效果的後台導航欄呢,一起來文中看看~

先上完成效果:

整體的製作過程

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了。大功告成,可以自己玩玩了。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《製作動態效果的後台導航欄——左側導航》
文章链接:https://www.pmbear.com/archives/9493
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们