之前在網(wǎng)上看到一款可以任意拖動(dòng)的圖標(biāo)菜單，效果很是酷炫，于是想用Axure去實(shí)現(xiàn)它，經(jīng)過(guò)一番嘗試，效果還是很理想的。話說(shuō)什么是帶拖動(dòng)軌跡的圖標(biāo)菜單，我也說(shuō)不清楚，請(qǐng)看下面的效果圖吧。
(點(diǎn)擊預(yù)覽)
首先，這個(gè)菜單由五個(gè)圖標(biāo)組成，一個(gè)主菜單圖標(biāo)，四個(gè)二級(jí)菜單圖標(biāo);
其次，點(diǎn)擊主菜單可以彈出或收起二級(jí)菜單;
再次，拖動(dòng)主菜單圖標(biāo)時(shí)，二級(jí)菜單圖標(biāo)會(huì)跟隨主菜單圖標(biāo)移動(dòng)并形成運(yùn)動(dòng)軌跡。
關(guān)于圖標(biāo)
菜單中使用到的圖標(biāo)，可以直接通過(guò)Axure部件庫(kù)自帶的圖標(biāo)，也可以從外部導(dǎo)入png圖標(biāo)
關(guān)于點(diǎn)擊
點(diǎn)擊主菜單圖標(biāo)時(shí)，彈出或收起四個(gè)二級(jí)圖標(biāo)菜單，很容易想到的是利用Axure的“移動(dòng)”功能
關(guān)于拖動(dòng)
對(duì)于拖動(dòng)來(lái)講，首先第一想到的是要用動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才可以增加拖動(dòng)事件;其次拖動(dòng)主菜單圖標(biāo)后二級(jí)菜單圖標(biāo)跟隨移動(dòng)并形成運(yùn)動(dòng)軌跡，則也是利用的Axure的移動(dòng)功能
1、準(zhǔn)備圖標(biāo)菜單
這個(gè)過(guò)程其實(shí)沒(méi)有什么好說(shuō)的，你可以畫(huà)五個(gè)大小相同顏色不同的圓形形狀，也可以導(dǎo)入五張大小相同內(nèi)容不同的PNG圖片(為什么要PNG，因?yàn)槟阋_保你的圓形圖標(biāo)是沒(méi)有背景色的)。
2、轉(zhuǎn)為動(dòng)態(tài)面板
將圖標(biāo)菜單選中后，點(diǎn)擊右鍵，選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”，每個(gè)圖標(biāo)菜單需要單獨(dú)轉(zhuǎn)換，最終會(huì)有五個(gè)動(dòng)態(tài)面板。
3、排列圖標(biāo)菜單
將五個(gè)轉(zhuǎn)為動(dòng)態(tài)面板的圖標(biāo)(1,2,3,4,5)按照從上到下的的順序重疊排放在一起，即1放在最上面，2~5的順序可以隨意排列。排列好后就是下面這個(gè)樣子。
4、增加點(diǎn)擊事件
接下來(lái)為代表主菜單圖標(biāo)的動(dòng)態(tài)面板1添加點(diǎn)擊事件，要實(shí)現(xiàn)的效果就是：開(kāi)始時(shí)點(diǎn)擊主菜單，彈出四個(gè)二級(jí)菜單;然后再點(diǎn)擊主菜單收起四個(gè)二級(jí)菜單，二級(jí)菜單在彈出和收起的過(guò)程中增加動(dòng)效。
(1)點(diǎn)擊主菜單彈出二級(jí)菜單
點(diǎn)擊主菜單彈出二級(jí)菜單的效果其實(shí)就是利用了“移動(dòng)”動(dòng)作，當(dāng)點(diǎn)擊主菜單時(shí)，移動(dòng)二級(jí)菜單2,3,4,5;另外分別設(shè)置移動(dòng)的相對(duì)位置，已保證彈出后的二級(jí)菜單是可以均勻排列的，為了使彈出帶有動(dòng)效，可以設(shè)置移動(dòng)動(dòng)作的動(dòng)畫(huà)效果(彈性)和時(shí)間(1000ms)。
上面的過(guò)程實(shí)現(xiàn)了點(diǎn)擊主菜單彈出二級(jí)菜單的效果，但實(shí)際上并不是在任何時(shí)候點(diǎn)擊主菜單都要彈出二級(jí)菜單，因?yàn)樵诙?jí)菜單已經(jīng)彈出的情況下點(diǎn)擊主菜單，就需要收起二級(jí)菜單，所以此時(shí)要在上面的動(dòng)作執(zhí)行過(guò)程中增加一個(gè)判斷條件，即點(diǎn)擊主菜單后，滿足某個(gè)條件時(shí)才會(huì)彈出二級(jí)菜單。
這個(gè)條件的意思是：主菜單1接觸到二級(jí)菜單2。想想什么時(shí)候會(huì)滿足這個(gè)條件?也就是二級(jí)菜單收起時(shí)，主菜單1會(huì)覆蓋在二級(jí)菜單2上面，也就滿足了這個(gè)條件;當(dāng)二級(jí)菜單彈出后，主菜單1并沒(méi)有接觸到二級(jí)菜單2，也就不滿足這個(gè)條件。
(2)點(diǎn)擊主菜單收起二級(jí)菜單
點(diǎn)擊主菜單收起二級(jí)菜單的過(guò)程其實(shí)跟上面點(diǎn)擊主菜單彈出二級(jí)菜單的過(guò)程類(lèi)似，只是移動(dòng)的方向相反，另外無(wú)需設(shè)置額外的判斷條件，只需要在單擊事件下增加一個(gè) case2 即可。
這時(shí)候預(yù)覽一下原型，就可以實(shí)現(xiàn)點(diǎn)擊主菜單圖標(biāo)彈出二級(jí)菜單圖標(biāo)，然后再點(diǎn)擊主菜單圖標(biāo)收起二級(jí)菜單圖標(biāo)的效果了。接下來(lái)再來(lái)實(shí)現(xiàn)主菜單圖標(biāo)拖動(dòng)效果。
5、增加拖動(dòng)事件
為主菜單圖標(biāo)的動(dòng)態(tài)面板增加拖動(dòng)事件，執(zhí)行的動(dòng)作就是跟隨拖動(dòng)軌跡來(lái)移動(dòng)五個(gè)菜單圖標(biāo)，但為了可以出現(xiàn)拖動(dòng)軌跡效果，在執(zhí)行移動(dòng)二級(jí)菜單2,3,4,5動(dòng)作之間增加等待時(shí)間。
到此為止，大功告成。
以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你整理的《帶拖動(dòng)軌跡的頁(yè)面圖標(biāo)菜單設(shè)計(jì)》全部?jī)?nèi)容。如果想要觀看網(wǎng)站建設(shè)案例：金融行業(yè)網(wǎng)站建設(shè)案例，以及其他精彩的建站基礎(chǔ)知識(shí)可直接點(diǎn)擊查看。
