寫在前面

最近看到一個非?？犰诺膍enu插件，一直想把它鼓搗成vue形式，誰讓我是vue的死灰粉呢，如果這都不算愛:pensive:。:laughing:開個小玩耍，我們一起來探索黑魔法吧。觀看本教程的讀者需要具備一定的vue和css3的知識.

本文結(jié)構(gòu)

1.效果演示

2.使用方法介紹

3.關(guān)鍵步驟講解

正文

1.效果演示

pic_1

pic2

pic_3

在線演示 live demo

2.使用介紹

項(xiàng)目地址:github.com/MingSeng-W/vue-bloom-menu ,clone項(xiàng)目到本地

a. 首先在單文件組件里引入menu組件，導(dǎo)入common文件夾stylus里的menuConfig.stylus.

b.配置相應(yīng)的參數(shù)

可選參數(shù)

* radius：default為100px,item距離menu的button的距離。

* startAngle:defaut為0，item開始的角度，以時鐘3點(diǎn)鐘方向記為0，然后順時針方向?yàn)檫f增方向。

* endAngle:default為315，最后一個item的角度。

* itemNum:default為8

* animationDuration:default為0.5s，每個item動畫的執(zhí)行時間

* itemAnimationDelay:default為0.04s,每個item之間animation觸發(fā)的間隔延遲時間

必選參數(shù)

* iconImgArr

import您需要的icon,然后生成iconImgArr（computed屬性綁定），作為props傳給menu組件

menu的位置

目前有center,corner兩種位置，在menu的class里指定。center的class:.menu-center-wrapper

corner的class:.menu-left-corner-wrapper。當(dāng)然自己指定位置也是ok的。

一個簡單的example

demo

3.關(guān)鍵步驟講解

整個menu的實(shí)現(xiàn)關(guān)鍵在于計(jì)算menu展開后最后的坐標(biāo)，以及展開與收縮的動畫.（由于整個項(xiàng)目布局比較簡單，所以這里主要講解邏輯和動畫的實(shí)現(xiàn)）

第一步：計(jì)算menu展開后橫坐標(biāo)和縱坐標(biāo)

下面的x,y分別表示item在頁面的位置,以x為例。

x：原始的位置，x2最后展開的位置，x1中間的過渡位置(主要是造成一個“拉回”的效果)，以下是圖片解釋,為了解釋簡單明了，我放大了radius倍數(shù)以及增加了動畫的執(zhí)行時間。

位置解釋

位置的計(jì)算：首先計(jì)算每個item之間的夾角,起始item是沿著順時針布局的，每個item之間的夾角等于(endAngle-startAngle)/(itemNum-1)。當(dāng)前item應(yīng)該旋轉(zhuǎn)的角度為：angleCur=startAngle+index*每個item之間的夾角。得到item的旋轉(zhuǎn)角度之后，用Math.cos和Math.sin和radius相乘得到其橫坐標(biāo)和縱坐標(biāo).

關(guān)鍵代碼:

計(jì)算每個item的夾角

位置解釋

第二步，根據(jù)生成的坐標(biāo)使用js動態(tài)生成animtion,并插入到樣式文件中。

生成展開和收縮的keyframe

到這一步我們完成了點(diǎn)擊menu展開與收縮。

第二步，完成點(diǎn)擊item之后item放大與消失，其他的item縮小與消失

item消失的keyframe

item消失的keyframe

這里觸發(fā)動畫使用 vue提供transition ，當(dāng)元素的v-show為false時，也就是display為none時，觸發(fā)動畫。

每個item動畫完成后都會觸發(fā)animationEnd事件，監(jiān)聽item的animationEnd事件，當(dāng)所有動畫依次觸發(fā)完畢之后，提醒menu置于關(guān)閉狀態(tài)（ 父子組件通信 ）。

我在menu組件里使用v-on監(jiān)聽animationEnd事件，item自己的動畫執(zhí)行后,通過$emit觸發(fā)animationEnd事件，通知menu的動畫計(jì)數(shù)count++,當(dāng)count達(dá)到總的項(xiàng)目數(shù)的時候,menu進(jìn)行關(guān)閉.

code

code

再次打開menu的時候檢查與item綁定的showItem是否為false,是的話置為true。點(diǎn)擊時需要拿到被點(diǎn)擊item的index,得到全局的currentIndex即被點(diǎn)擊的item的index。被點(diǎn)中的使用放大動畫，否則使用縮小動畫。

pic_6

關(guān)鍵代碼

至此所有步驟講解完畢

總結(jié)

以上所述是小編給大家介紹的基于 Vue 實(shí)現(xiàn)一個酷炫的 menu插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論