中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文章基于最新版的網易云音樂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坐標值。

本文由 @HideOnBush 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議