2018年最后一個工作日，給大家分享一個仿網易云播放器制作案例（帶聲音且可切換歌曲）。希望大家能夠享受音樂帶來的快樂，同時消除工作緊張拟逮、減輕生活壓力，帶著美好心情進入2019年的生活适滓。
演示地址：仿網易云播放器：帶聲音可切換歌曲的播放器
1敦迄、點擊播放按鈕，可播放凭迹、暫停歌曲罚屋；
2、點擊前進按鈕/后臺按鈕嗅绸，可切換歌曲脾猛；
3、切換歌曲時鱼鸠，當前是播放狀態(tài)猛拴，則切換歌曲的時候也是播放狀態(tài)羹铅；
4、切換歌曲時愉昆，當前是暫停狀態(tài)职员，則切換歌曲的時候是暫停狀態(tài)；
5撼唾、歌曲切換的時候，頂部歌曲名稱及演唱者會相應變化哥蔚；
6倒谷、歌曲播放過程中，歌曲會顯示實時的播放進度糙箍。
溫馨提示：此演示案例帶有聲音，工作期間請帶上耳機，以免造成不必要的影響
原理分析
1攻旦、通過播放/暫停按鈕控制循環(huán)動態(tài)面板是否循環(huán)
2乃正、通過上一首、下一首按鈕控制切換歌曲
3咕晋、通過循環(huán)動態(tài)面板控制歌曲播放進度雹拄，歌曲旋轉播放動效
4、通過文本元件預存歌曲播放時長（以秒為單位）
5掌呜、通過內聯(lián)框架加載真實歌曲
6滓玖、用熱區(qū)控制用于表示播放進度圓球移動邊界
元件準備
1、頂部元素
1.1 2個文本矩形框质蕉，分別放作者名稱和歌曲名稱
1.2 1張表示返回的圖片
1.3 1張頂部背景（配置陰影效果势篡，體現層級關系）
2、1張撥片圖片模暗，用于體現歌曲播放或暫停的狀態(tài)
3禁悠、歌曲播放動效元素
3.1 1個白色矩形框，調整圓角半徑兑宇，使之成為圓形
3.2 1個黑色矩形框碍侦，調整圓角半徑，使之成為圓形
3.3 動態(tài)面板隶糕，設置三種狀態(tài)祝钢，分別放置三首歌曲的圖片
4、播放進度元素
4.1 1個橢圓形元件若厚，用于動態(tài)顯示歌曲播放進度
4.2 1個矩形拦英，用于表示播放進度背景
4.3 兩個矩形，分別表示播放進度時間和歌曲時間
4.4 1個熱區(qū)测秸，用于控制圓形元件的移動邊界
5疤估、5張圖片灾常，分別表示歌曲循環(huán)、上一首铃拇、播放/暫统伲控制、下一首慷荔、更多
6雕什、一個內聯(lián)框架，用于實時加載歌曲
7显晶、1個文本元件贷岸，用于表示當前播放歌曲的時間（秒殺）
8、動態(tài)面板磷雇，用于控制圖片循環(huán)及播放進度動效
將內聯(lián)框架偿警、時間舉行，循環(huán)面板位置放在不顯眼處唯笙，重新布局元件后效果如下：
實現步驟
1螟蒸、播放按鈕設置
? ?? ? 播放按鈕初始狀態(tài)是暫停待播放圖片，表示當前是暫停狀態(tài)崩掘；選中時七嫌，我們預置一張播放待暫停圖片，表示當前是播放狀態(tài)
? ??點擊播放按鈕時苞慢，切換按鈕的選中狀態(tài)抄瑟。分別設置選中、取消選中時的事件
? ? 選中時枉疼，啟動循環(huán)面板皮假，每個0.5秒變換一次狀態(tài)，同時將播放撥片旋轉到唱片上骂维；同時判斷當前面板的狀態(tài)惹资，根據面板狀態(tài)分別設置歌曲名稱、作者航闺、歌曲時間及要播放的歌曲
? ? 取消選中時褪测，停止循環(huán)面板。將播放撥片旋轉到初始位置潦刃，同時在內聯(lián)框架打開空鏈接（終止歌曲播放作用）侮措，將用于表示播放進度的圓球移到初始位置
? ? 循環(huán)動態(tài)面板設置事件
? ? 播放撥片設置事件，注意錨點偏移設置
? ?? 在內聯(lián)框架打開mp3歌曲的設置乖杠，如果用本地mp3文件分扎，注意相對路徑和絕對路徑的區(qū)別
2、上一首按鈕設置
? ? 點擊“上一首”按鈕時胧洒，需要先判斷歌曲狀態(tài)畏吓，
? ? 如果是播放狀態(tài)的話墨状，需要在切換動態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點擊事件（否則無法切換歌曲）
? ? 如果是暫停狀態(tài)菲饼，則只需要切換動態(tài)面板狀態(tài)即可
? ? 切換循環(huán)動態(tài)面板及觸發(fā)播放按鈕重新播放的事件配置如下
3肾砂、下一首按鈕設置
? ? 同理，點擊“下一首”按鈕時宏悦，需要先判斷歌曲狀態(tài)镐确，
? ? 如果是播放狀態(tài)的話，需要在切換動態(tài)面板顯示狀態(tài)后饼煞，再觸發(fā)播放按鈕的點擊事件（否則無法切換歌曲）
? ? 如果是暫停狀態(tài)源葫，則只需要切換動態(tài)面板狀態(tài)即可
4、循環(huán)動態(tài)面板事件
? ? 當播放按鈕的狀態(tài)是選中時派哲，啟用循環(huán)動態(tài)面板
? ? 當循環(huán)面板的狀態(tài)改變時臼氨，移動圓球掺喻，同時旋轉唱片芭届，從而動態(tài)顯示歌曲播放
? ? ?用于表示播放進度的圓球移動事件如下圖設置，注意每次移動的距離根據歌曲的時間長度而變化
? ? ?移動距離計算：播放背景長度 除以 歌曲時長（需要將歌曲時長換算成秒感耙，用time元件臨時保存）
? ? 旋轉唱片的設置事件
5褂乍、圓球移動事件設置（表示播放進度）
? ? ? ? 圓球在移動時，需要設置一個邊界（放一個熱區(qū)作為邊界）即硼，當圓球接觸邊界時逃片，觸發(fā)播放的點擊事件（也就是暫停歌曲播放）
? ? 觸發(fā)事件設置如下
6、唱片狀態(tài)改變事件設置
? ? 當唱片狀態(tài)改變時只酥，需要根據唱片當前顯示的狀態(tài)褥实，分別設置歌曲名稱、作者裂允、歌曲時間及要播放的歌曲
? ?這個步驟不能少损离，否則在未播放狀態(tài)下點擊“上一首”或“下一首”按鈕時，歌曲名稱等不會變化
本案例已完成绝编，點擊QQ群“532261671”獲取源文件僻澎；
更多案例請點擊http://www.pmgod.cn?查看。
