網易雲音樂接口+vue全家桶開發一款移動端音樂webApp項目還在develop中,感興趣想要參與的小夥伴能夠私我css
效果圖:html
骨架屏vue
首頁html5
側邊node
每日推薦webpack
歌單ios
播放器(小)css3
播放器(大)git
測試地址
vue-cli搭建github
新增目錄以下:
---src ------api // 放置api的目錄 ---------base.js // 放置axios的一些配置,接口域名地址,以及公共參數配置,與後臺約定跨域的配置,全局loading配置等 ---------urls.js // 放置接口url ---------api.js // 放置封裝的promise請求 ------base // 放置一些基礎組件 ------common ---------js // 公共js ---------sass // 公共樣式
const view = (path, name) => () => import(`@/components/${path}${name}`)// 路由按需加載 //這邊用的是vue異步組件的方式實現路由的按需加載 new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })
大小播放器分別寫了MiniPlayer.vue
和NormalPlayer.vue
兩個組件,由於想要職責單一,就沒有放在一塊兒
動畫
頭部下墜和底部的上浮
<transition name="example"> </transition> /*css 樣式*/ // 給 transition下第一個元素顯示或隱藏時添加的樣式 //這兩個類名都是定義開始到結束的持續時間 方式 以及延遲 .example-enter-active{ transition:all 0.4s linear 對全部屬性執行0.4s的動畫 勻速 } .example-leave-active{ transition:all 0.4s linear 對全部屬性執行0.4s的動畫 勻速 } // 進入過分的開始狀態 觸發時機 元素被插入前 插入後下一幀移除 .example-enter{ } // 離開過分的結束狀態 觸發時機 example-leave下一幀 動畫過分完成被移除 .example-leave-to{ } 可使用碟中諜6中的halo跳傘來理解 .example-enter-active就是從飛機上離開到開傘的時間 .example-enter 下墜前在飛機上的最後一刻 .example-enter-to 開始下墜,具有加速度的那一刻 .example-leave-active 開傘到着陸的時間 .example-leave 開傘命令發出時 .example-leave-to 傘開下一刻
先計算出小播放器圖片離最終大播放器cd的x,y軸上的距離
使用 create-keyframe-animation
進行一個css3
動畫狀態的註冊
再利用transition的動畫方法鉤子
在enter
時run
動畫,afterEnter
時清除動畫 leave
同理
定義一個旋轉的css
動畫,在一個class
中進行調用,在play
的狀態下給它addClss
,pause
時加上animation-play-state: paused
使用html5
的 audio
結合vuex
來進行播放器功能的實現,包括進度條,播放,暫停,上一曲,下一曲,播放模式等
mounted
的鉤子裏註冊resize
和onload
監聽,進行最外層rem基準的計算Access-Control-Allow-Origin
是請求頭裏的orgin
,因此建議clone
接口庫到本地運行,github
中運行方式已做修改。