文章基於最新版的網易雲音樂IOS APP撰寫本教程，本文將詳細講述音樂識別及音樂播放界面的交互效果。
話不多說，按慣例先上實現的效果：
- 原型效果在5.5英寸屏幕上瀏覽獲得最佳體驗，否則在電腦端更好。
- 原型在手機端音樂播放可能不會有聲音，視頻正常播放，電腦端一切正常。
- 實際的某些效果可能在本文不會完全闡述。參考博主之前的文章基本可以完全Get。
整體效果截圖
首頁：
視頻播放：
我的音樂：
朋友：
音樂識別：
音樂播放：
實現
本原型實際效果可以在預覽地址查看，本文將重點講述播放器界面的實現過程。
1.原型共有11個獨立頁面：
依次為：首頁，排行榜，FM，視頻，我的，朋友，賬號，音樂識別，音樂播放，每日推薦，歌單頁面。
2.音樂識別界面效果實現
分析：
- 1.音樂識別效果由首頁左上角麥克風圖標點擊後觸發，進入識別頁面時開始識別同時效果自動開始。由於音樂識別和首頁分別在兩個不同頁面，所以可以考慮通過全局變量的設置去觸發自動開始。
- 2.效果呈波浪狀，由中心向四周擴散。可以考慮通過多個圓交替改變大小實現。交替效果實現方式多種，本例將使用“顯示”和“隱藏”元件來實現交替循環。
實例步驟：
（1）給首頁麥克風圖標設置如下交互：
musicreg為全局變量。
（2）音樂識別界面添加如下元件：
小圓分別命名為：1，2，3，4 設置隱藏；大圓可見 命名為b1，b2,b3
（3）音樂識別界面頁面載入事件設置：
判斷全局變量musicreg，如果為1則全選中小圓，最後設置變量為0。
（4）小圓交互設置：
以小圓1為例，其他小圓同理：
（5）設置音樂識別頁面麥克風點擊事件：
判斷變量是否為0，為真時重新加載當前頁面，從而停止音樂識別動效，當然還有另一種方法實現停止，博主在此偷會懶…至此完成音樂識別界面所有交互。
3.音樂播放界面效果實現
音樂播放實現瞭如下效果：
- 點擊播放按鈕音樂開始播放，同時中部的指針接觸到唱片，唱片同步旋轉
- 底部播放時間秒級遞增，時間線同步向右移動；
- 點擊中間部分切換到歌詞頁面，歌詞同步向上移動；
- 再次點擊播放按鈕時所有動作停止，指針遠離唱片；
- 時間線可以點擊，時間線上的滑塊可以拖動，同時時間隨著增加。
主要元件準備：
- 1.動態面板play兩種狀態：play plus 分別存放播放和暫停圖標
- 動態面板slide ,用於時間線上能拖動的滑塊
- SlideBgLine 1px高度的線條或者矩形，用於默認的時間線
- slide2 動態面板，用於時間線移動時的背景色
- 文本標籤start 用於存放當前播放時間
- 文本標籤 end 用於存放總時長
- 隱藏的矩形TempPlay/Plus 用於存放播放按鈕狀態
- 隱藏的文本框TempTime 用於存放播放的時長
- 動態面板rotion_pannel 唱片上的指針
- 動態面板 amb-arr 用於唱片
- 隱藏的動態面板lyric-pannel 用於存放歌詞
實現思路：
- 當play按鈕為播放的時候點擊後在內聯框架中打開音樂地址，旋轉唱片及指針，同時設置唱片和指針的旋轉事件旋轉當前元件一定角度，就實現了旋轉的循環。當按鈕為暫停的時候在框架中打開鏈接設置為空，停止旋轉唱片及指針
- 播放的時候設置一個播放狀態 TempPlay/Plus 比如播放為1 ，暫停的時候設置TempPlay/Plus為0
- 播放時移動TempTime
- 在TempTime移動的時候設置TempTime的文本值為當前值+1，再次移動TempTime實現時間的遞增，同時移動slide lyric-pannel 並設置slide2的寬度
- TempTime的移動改變了TempTime的值，但是我們需要這個值一直循環遞增，所以還需設置TempTime在文本改變時候的交互：
其中slide的移動距離需要如下運算：
[[(LVAR2.width/210)*LVAR1-target.x+77]]這表示：背景的寬度除以總時長再乘以移動時間得到0秒到當前時間的總移動距離，這個距離需要減去slide上一次在X軸移動的距離同時要加上初始的位置。
start開始時間需要做如下處理： 由於時間顯示是以00:00這種格式，所以我們需要處理從TempTime得到的時間格式：
0[[(LVAR1/60).toFixed(0)]]:0[[LVAR1%60]] 表示：時間以秒遞增，所以我們以當前時間除以60四捨五入取整作為分鐘數，當前時間除以60取餘數得到當前秒，同時在分鐘和秒前添加0得到00:00這種時間格式。
需要說明的是由於是四捨五入取整，所以在小於30s的每個遞增10s區間你都要如上設置，而在超過30s到60s之間由於取整滿足了入的條件，分鐘數額外增加了一分鐘數需要減一分鐘：
0[[(LVAR1/60).toFixed(0)-1]]:[[LVAR1%60]]
- slide拖動事件設置：
- 時間線點擊事件設置：
cursor.x用於獲取點擊位置的x座標值。
題圖來自PEXELS，基於CC0協議
閱讀更多 人人都是產品經理 的文章
