国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

新的一年到來了，給大家分享一個仿網(wǎng)易云播放器制作案例（帶聲音且可切換歌曲）。希望大家能夠享受音樂帶來的快樂，同時消除工作緊張、減輕生活壓力，帶著美好心情進(jìn)入2019年的生活。

演示地址

仿網(wǎng)易云播放器：帶聲音可切換歌曲的播放器

1. 點(diǎn)擊播放按鈕，可播放、暫停歌曲；
2. 點(diǎn)擊前進(jìn)按鈕/后臺按鈕，可切換歌曲；
3. 切換歌曲時，當(dāng)前是播放狀態(tài)，則切換歌曲的時候也是播放狀態(tài)；
4. 切換歌曲時，當(dāng)前是暫停狀態(tài)，則切換歌曲的時候是暫停狀態(tài)；
5. 歌曲切換的時候，頂部歌曲名稱及演唱者會相應(yīng)變化；
6. 歌曲播放過程中，歌曲會顯示實(shí)時的播放進(jìn)度。

溫馨提示：此演示案例帶有聲音，工作期間請帶上耳機(jī)，以免造成不必要的影響。

原理分析

1. 通過播放/暫停按鈕控制循環(huán)動態(tài)面板是否循環(huán)；
2. 通過上一首、下一首按鈕控制切換歌曲；
3. 通過循環(huán)動態(tài)面板控制歌曲播放進(jìn)度，歌曲旋轉(zhuǎn)播放動效；
4. 通過文本元件預(yù)存歌曲播放時長（以秒為單位）；
5. 通過內(nèi)聯(lián)框架加載真實(shí)歌曲；
6. 用熱區(qū)控制用于表示播放進(jìn)度圓球移動邊界。

元件準(zhǔn)備

1. 頂部元素

1.1 2個文本矩形框，分別放作者名稱和歌曲名稱

1.2 1張表示返回的圖片

1.3 1張頂部背景（配置陰影效果，體現(xiàn)層級關(guān)系）

2. 1張撥片圖片，用于體現(xiàn)歌曲播放或暫停的狀態(tài)

3. 歌曲播放動效元素

3.1 1個白色矩形框，調(diào)整圓角半徑，使之成為圓形

3.2 1個黑色矩形框，調(diào)整圓角半徑，使之成為圓形

3.3 動態(tài)面板，設(shè)置三種狀態(tài)，分別放置三首歌曲的圖片

4. 播放進(jìn)度元素

4.1 1個橢圓形元件，用于動態(tài)顯示歌曲播放進(jìn)度

4.2 1個矩形，用于表示播放進(jìn)度背景

4.3 兩個矩形，分別表示播放進(jìn)度時間和歌曲時間

4.4 1個熱區(qū)，用于控制圓形元件的移動邊界

5. 5張圖片，分別表示歌曲循環(huán)、上一首、播放/暫?？刂?、下一首、更多

6. 一個內(nèi)聯(lián)框架，用于實(shí)時加載歌曲

7. 1個文本元件，用于表示當(dāng)前播放歌曲的時間（秒殺）

8. 動態(tài)面板，用于控制圖片循環(huán)及播放進(jìn)度動效

將內(nèi)聯(lián)框架、時間舉行，循環(huán)面板位置放在不顯眼處，重新布局元件后效果如下：

實(shí)現(xiàn)步驟

1. 播放按鈕設(shè)置

播放按鈕初始狀態(tài)是暫停待播放圖片，表示當(dāng)前是暫停狀態(tài)；選中時，我們預(yù)置一張播放待暫停圖片，表示當(dāng)前是播放狀態(tài)

點(diǎn)擊播放按鈕時，切換按鈕的選中狀態(tài)。分別設(shè)置選中、取消選中時的事件。

選中時，啟動循環(huán)面板，每個0.5秒變換一次狀態(tài)，同時將播放撥片旋轉(zhuǎn)到唱片上；同時判斷當(dāng)前面板的狀態(tài)，根據(jù)面板狀態(tài)分別設(shè)置歌曲名稱、作者、歌曲時間及要播放的歌曲。

取消選中時，停止循環(huán)面板。將播放撥片旋轉(zhuǎn)到初始位置，同時在內(nèi)聯(lián)框架打開空鏈接（終止歌曲播放作用），將用于表示播放進(jìn)度的圓球移到初始位置。

循環(huán)動態(tài)面板設(shè)置事件：

播放撥片設(shè)置事件，注意錨點(diǎn)偏移設(shè)置：

在內(nèi)聯(lián)框架打開mp3歌曲的設(shè)置，如果用本地mp3文件，注意相對路徑和絕對路徑的區(qū)別：

2. 上一首按鈕設(shè)置

點(diǎn)擊“上一首”按鈕時，需要先判斷歌曲狀態(tài)：

如果是播放狀態(tài)的話，需要在切換動態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點(diǎn)擊事件（否則無法切換歌曲）；

如果是暫停狀態(tài)，則只需要切換動態(tài)面板狀態(tài)即可。

切換循環(huán)動態(tài)面板及觸發(fā)播放按鈕重新播放的事件配置如下：

3. 下一首按鈕設(shè)置

同理，點(diǎn)擊“下一首”按鈕時，需要先判斷歌曲狀態(tài)：

如果是播放狀態(tài)的話，需要在切換動態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點(diǎn)擊事件（否則無法切換歌曲）；

如果是暫停狀態(tài)，則只需要切換動態(tài)面板狀態(tài)即可。

4. 循環(huán)動態(tài)面板事件

當(dāng)播放按鈕的狀態(tài)是選中時，啟用循環(huán)動態(tài)面板；

當(dāng)循環(huán)面板的狀態(tài)改變時，移動圓球，同時旋轉(zhuǎn)唱片，從而動態(tài)顯示歌曲播放。

用于表示播放進(jìn)度的圓球移動事件如下圖設(shè)置，注意每次移動的距離根據(jù)歌曲的時間長度而變化。

移動距離計(jì)算：播放背景長度 除以 歌曲時長（需要將歌曲時長換算成秒，用time元件臨時保存）。

旋轉(zhuǎn)唱片的設(shè)置事件：

5. 圓球移動事件設(shè)置（表示播放進(jìn)度）

圓球在移動時，需要設(shè)置一個邊界（放一個熱區(qū)作為邊界），當(dāng)圓球接觸邊界時，觸發(fā)播放的點(diǎn)擊事件（也就是暫停歌曲播放）。

觸發(fā)事件設(shè)置如下：

6. 唱片狀態(tài)改變事件設(shè)置

當(dāng)唱片狀態(tài)改變時，需要根據(jù)唱片當(dāng)前顯示的狀態(tài)，分別設(shè)置歌曲名稱、作者、歌曲時間及要播放的歌曲。

這個步驟不能少，否則在未播放狀態(tài)下點(diǎn)擊“上一首”或“下一首”按鈕時，歌曲名稱等不會變化。

本案例已完成，點(diǎn)擊查看上一篇案例《穿梭器：雙向列表帶計(jì)數(shù)選擇（支持單選、多選和全選）》

本文由 @十月大神 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。