用vue作一個酷炫的menu

寫在前面

        最近看到一個很是酷炫的menu插件，一直想把它鼓搗成vue形式，誰讓我是vue的死灰粉呢，若是這都不算愛😔。😆開個小玩耍，咱們一塊兒來探索黑魔法吧。觀看本教程的讀者須要具有必定的vue和css3的知識.

本文結構

1.效果演示

2.使用方法介紹

3.關鍵步驟講解

正文

1.效果演示

 

pic_1

 

pic2

 

pic_3

     在線演示live demo

2.使用介紹

        項目地址:github.com/MingSeng-W/vue-bloom-menu,clone項目到本地

       a. 首先在單文件組件裏引入menu組件，導入common文件夾stylus裏的menuConfig.stylus.

       b.配置相應的參數

            可選參數

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

            *  startAngle:defaut爲0，item開始的角度，以時鐘3點鐘方向記爲0，而後順時針方向爲遞增方向。

           *  endAngle:default爲315，最後一個item的角度。

           *  itemNum:default爲8

            *  animationDuration:default爲0.5s，每一個item動畫的執行時間

            *  itemAnimationDelay:default爲0.04s,每一個item之間animation觸發的間隔延遲時間

          必選參數

            * iconImgArr

        import您須要的icon,而後生成iconImgArr（computed屬性綁定），做爲props傳給menu組件

           menu的位置

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

corner的class:.menu-left-corner-wrapper。固然本身指定位置也是ok的。

          一個簡單的example

 

demo

3.關鍵步驟講解

    整個menu的實現關鍵在於計算menu展開後最後的座標，以及展開與收縮的動畫.（因爲整個項目佈局比較簡單，因此這裏主要講解邏輯和動畫的實現）

    第一步：計算menu展開後橫座標和縱座標

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

    x：原始的位置，x2最後展開的位置，x1中間的過渡位置(主要是形成一個「拉回」的效果)，如下是圖片解釋,爲了解釋簡單明瞭，我放大了radius倍數以及增長了動畫的執行時間。

 

位置解釋

    位置的計算：首先計算每一個item之間的夾角,起始item是沿着順時針佈局的，每一個item之間的夾角等於(endAngle-startAngle)/(itemNum-1)。當前item應該旋轉的角度爲：angleCur=startAngle+index*每一個item之間的夾角。獲得item的旋轉角度以後，用Math.cos和Math.sin和radius相乘獲得其橫座標和縱座標.

    關鍵代碼:

計算每一個item的夾角

位置解釋

第二步，根據生成的座標使用js動態生成animtion,並插入到樣式文件中。

生成展開和收縮的keyframe

到這一步咱們完成了點擊menu展開與收縮。

    第二步，完成點擊item以後item放大與消失，其餘的item縮小與消失

    item消失的keyframe

    

    item消失的keyframe

    這裏觸發動畫使用vue提供transition ，當元素的v-show爲false時，也就是display爲none時，觸發動畫。

    每一個item動畫完成後都會觸發animationEnd事件，監聽item的animationEnd事件，當全部動畫依次觸發完畢以後，提醒menu置於關閉狀態（父子組件通訊 ）。

    我在menu組件裏使用v-on監聽animationEnd事件，item本身的動畫執行後,經過$emit觸發animationEnd事件，通知menu的動畫計數count++,當count達到總的項目數的時候,menu進行關閉.

code

code

      再次打開menu的時候檢查與item綁定的showItem是否爲false,是的話置爲true。點擊時須要拿到被點擊item的index,獲得全局的currentIndex即被點擊的item的index。被點中的使用放大動畫，不然使用縮小動畫。

pic_6

 

關鍵代碼

至此全部步驟講解完畢