帶拖動軌跡的頁面圖標(biāo)菜單設(shè)計

之前在網(wǎng)上看到一款可以任意拖動的圖標(biāo)菜單，效果很是酷炫，于是想用Axure去實(shí)現(xiàn)它，經(jīng)過一番嘗試，效果還是很理想的。話說什么是帶拖動軌跡的圖標(biāo)菜單，我也說不清楚，請看下面的效果圖吧。

(點(diǎn)擊預(yù)覽)

一、原型解析

首先，這個菜單由五個圖標(biāo)組成，一個主菜單圖標(biāo)，四個二級菜單圖標(biāo);

其次，點(diǎn)擊主菜單可以彈出或收起二級菜單;

再次，拖動主菜單圖標(biāo)時，二級菜單圖標(biāo)會跟隨主菜單圖標(biāo)移動并形成運(yùn)動軌跡。

二、設(shè)計思路

關(guān)于圖標(biāo)

菜單中使用到的圖標(biāo)，可以直接通過Axure部件庫自帶的圖標(biāo)，也可以從外部導(dǎo)入png圖標(biāo)

關(guān)于點(diǎn)擊

點(diǎn)擊主菜單圖標(biāo)時，彈出或收起四個二級圖標(biāo)菜單，很容易想到的是利用Axure的“移動”功能

關(guān)于拖動

對于拖動來講，首先第一想到的是要用動態(tài)面板，因?yàn)橹挥袆討B(tài)面板才可以增加拖動事件;其次拖動主菜單圖標(biāo)后二級菜單圖標(biāo)跟隨移動并形成運(yùn)動軌跡，則也是利用的Axure的移動功能

三、制作過程

1、準(zhǔn)備圖標(biāo)菜單

這個過程其實(shí)沒有什么好說的，你可以畫五個大小相同顏色不同的圓形形狀，也可以導(dǎo)入五張大小相同內(nèi)容不同的PNG圖片(為什么要PNG，因?yàn)槟阋_保你的圓形圖標(biāo)是沒有背景色的)。

2、轉(zhuǎn)為動態(tài)面板

將圖標(biāo)菜單選中后，點(diǎn)擊右鍵，選擇“轉(zhuǎn)換為動態(tài)面板”，每個圖標(biāo)菜單需要單獨(dú)轉(zhuǎn)換，最終會有五個動態(tài)面板。

3、排列圖標(biāo)菜單

將五個轉(zhuǎn)為動態(tài)面板的圖標(biāo)(1,2,3,4,5)按照從上到下的的順序重疊排放在一起，即1放在最上面，2~5的順序可以隨意排列。排列好后就是下面這個樣子。

4、增加點(diǎn)擊事件

接下來為代表主菜單圖標(biāo)的動態(tài)面板1添加點(diǎn)擊事件，要實(shí)現(xiàn)的效果就是：開始時點(diǎn)擊主菜單，彈出四個二級菜單;然后再點(diǎn)擊主菜單收起四個二級菜單，二級菜單在彈出和收起的過程中增加動效。

(1)點(diǎn)擊主菜單彈出二級菜單

點(diǎn)擊主菜單彈出二級菜單的效果其實(shí)就是利用了“移動”動作，當(dāng)點(diǎn)擊主菜單時，移動二級菜單2,3,4,5;另外分別設(shè)置移動的相對位置，已保證彈出后的二級菜單是可以均勻排列的，為了使彈出帶有動效，可以設(shè)置移動動作的動畫效果(彈性)和時間(1000ms)。

上面的過程實(shí)現(xiàn)了點(diǎn)擊主菜單彈出二級菜單的效果，但實(shí)際上并不是在任何時候點(diǎn)擊主菜單都要彈出二級菜單，因?yàn)樵诙壊藛我呀?jīng)彈出的情況下點(diǎn)擊主菜單，就需要收起二級菜單，所以此時要在上面的動作執(zhí)行過程中增加一個判斷條件，即點(diǎn)擊主菜單后，滿足某個條件時才會彈出二級菜單。

這個條件的意思是：主菜單1接觸到二級菜單2。想想什么時候會滿足這個條件?也就是二級菜單收起時，主菜單1會覆蓋在二級菜單2上面，也就滿足了這個條件;當(dāng)二級菜單彈出后，主菜單1并沒有接觸到二級菜單2，也就不滿足這個條件。

(2)點(diǎn)擊主菜單收起二級菜單

點(diǎn)擊主菜單收起二級菜單的過程其實(shí)跟上面點(diǎn)擊主菜單彈出二級菜單的過程類似，只是移動的方向相反，另外無需設(shè)置額外的判斷條件，只需要在單擊事件下增加一個 case2 即可。

這時候預(yù)覽一下原型，就可以實(shí)現(xiàn)點(diǎn)擊主菜單圖標(biāo)彈出二級菜單圖標(biāo)，然后再點(diǎn)擊主菜單圖標(biāo)收起二級菜單圖標(biāo)的效果了。接下來再來實(shí)現(xiàn)主菜單圖標(biāo)拖動效果。

5、增加拖動事件

為主菜單圖標(biāo)的動態(tài)面板增加拖動事件，執(zhí)行的動作就是跟隨拖動軌跡來移動五個菜單圖標(biāo)，但為了可以出現(xiàn)拖動軌跡效果，在執(zhí)行移動二級菜單2,3,4,5動作之間增加等待時間。

到此為止，大功告成。

當(dāng)前名稱：帶拖動軌跡的頁面圖標(biāo)菜單設(shè)計
網(wǎng)址分享：http://muchs.cn/news/171395.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣、搜索引擎優(yōu)化、網(wǎng)站制作、網(wǎng)站設(shè)計公司、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)