1、點(diǎn)擊播放按鈕，可播放、暫停歌曲；
2、點(diǎn)擊前進(jìn)按鈕/后臺(tái)按鈕，可切換歌曲；
3、切換歌曲時(shí)，當(dāng)前是播放狀態(tài)，則切換歌曲的時(shí)候也是播放狀態(tài)；
4、切換歌曲時(shí)，當(dāng)前是暫停狀態(tài)，則切換歌曲的時(shí)候是暫停狀態(tài)；
5、歌曲切換的時(shí)候，頂部歌曲名稱及演唱者會(huì)相應(yīng)變化；
6、歌曲播放過(guò)程中，歌曲會(huì)顯示實(shí)時(shí)的播放進(jìn)度。
溫馨提示：此演示案例帶有聲音，工作期間請(qǐng)帶上耳機(jī)，以免造成不必要的影響
原理分析
1、通過(guò)播放/暫停按鈕控制循環(huán)動(dòng)態(tài)面板是否循環(huán)
2、通過(guò)上一首、下一首按鈕控制切換歌曲
3、通過(guò)循環(huán)動(dòng)態(tài)面板控制歌曲播放進(jìn)度，歌曲旋轉(zhuǎn)播放動(dòng)效
4、通過(guò)文本元件預(yù)存歌曲播放時(shí)長(zhǎng)（以秒為單位）
5、通過(guò)內(nèi)聯(lián)框架加載真實(shí)歌曲
6、用熱區(qū)控制用于表示播放進(jìn)度圓球移動(dòng)邊界
元件準(zhǔn)備
1、頂部元素
1.1 2個(gè)文本矩形框，分別放作者名稱和歌曲名稱
1.2 1張表示返回的圖片
1.3 1張頂部背景（配置陰影效果，體現(xiàn)層級(jí)關(guān)系）
2、1張撥片圖片，用于體現(xiàn)歌曲播放或暫停的狀態(tài)
3、歌曲播放動(dòng)效元素
3.1 1個(gè)白色矩形框，調(diào)整圓角半徑，使之成為圓形
3.2 1個(gè)黑色矩形框，調(diào)整圓角半徑，使之成為圓形
3.3 動(dòng)態(tài)面板，設(shè)置三種狀態(tài)，分別放置三首歌曲的圖片
4、播放進(jìn)度元素
4.1 1個(gè)橢圓形元件，用于動(dòng)態(tài)顯示歌曲播放進(jìn)度
4.2 1個(gè)矩形，用于表示播放進(jìn)度背景
4.3 兩個(gè)矩形，分別表示播放進(jìn)度時(shí)間和歌曲時(shí)間
4.4 1個(gè)熱區(qū)，用于控制圓形元件的移動(dòng)邊界
5、5張圖片，分別表示歌曲循環(huán)、上一首、播放/暫？刂、下一首、更多
6、一個(gè)內(nèi)聯(lián)框架，用于實(shí)時(shí)加載歌曲
7、1個(gè)文本元件，用于表示當(dāng)前播放歌曲的時(shí)間（秒殺）
8、動(dòng)態(tài)面板，用于控制圖片循環(huán)及播放進(jìn)度動(dòng)效
將內(nèi)聯(lián)框架、時(shí)間舉行，循環(huán)面板位置放在不顯眼處，重新布局元件后效果如下：
實(shí)現(xiàn)步驟
1、播放按鈕設(shè)置
播放按鈕初始狀態(tài)是暫停待播放圖片，表示當(dāng)前是暫停狀態(tài)；選中時(shí)，我們預(yù)置一張播放待暫停圖片，表示當(dāng)前是播放狀態(tài)
點(diǎn)擊播放按鈕時(shí)，切換按鈕的選中狀態(tài)。分別設(shè)置選中、取消選中時(shí)的事件
選中時(shí)，啟動(dòng)循環(huán)面板，每個(gè)0.5秒變換一次狀態(tài)，同時(shí)將播放撥片旋轉(zhuǎn)到唱片上；同時(shí)判斷當(dāng)前面板的狀態(tài)，根據(jù)面板狀態(tài)分別設(shè)置歌曲名稱、作者、歌曲時(shí)間及要播放的歌曲
取消選中時(shí)，停止循環(huán)面板。將播放撥片旋轉(zhuǎn)到初始位置，同時(shí)在內(nèi)聯(lián)框架打開空鏈接（終止歌曲播放作用），將用于表示播放進(jìn)度的圓球移到初始位置
循環(huán)動(dòng)態(tài)面板設(shè)置事件
播放撥片設(shè)置事件，注意錨點(diǎn)偏移設(shè)置
在內(nèi)聯(lián)框架打開mp3歌曲的設(shè)置，如果用本地mp3文件，注意相對(duì)路徑和絕對(duì)路徑的區(qū)別
2、上一首按鈕設(shè)置
點(diǎn)擊“上一首”按鈕時(shí)，需要先判斷歌曲狀態(tài)，
如果是播放狀態(tài)的話，需要在切換動(dòng)態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點(diǎn)擊事件（否則無(wú)法切換歌曲）
如果是暫停狀態(tài)，則只需要切換動(dòng)態(tài)面板狀態(tài)即可
切換循環(huán)動(dòng)態(tài)面板及觸發(fā)播放按鈕重新播放的事件配置如下
3、下一首按鈕設(shè)置
同理，點(diǎn)擊“下一首”按鈕時(shí)，需要先判斷歌曲狀態(tài)，
如果是播放狀態(tài)的話，需要在切換動(dòng)態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點(diǎn)擊事件（否則無(wú)法切換歌曲）
如果是暫停狀態(tài)，則只需要切換動(dòng)態(tài)面板狀態(tài)即可
4、循環(huán)動(dòng)態(tài)面板事件
當(dāng)播放按鈕的狀態(tài)是選中時(shí)，啟用循環(huán)動(dòng)態(tài)面板
當(dāng)循環(huán)面板的狀態(tài)改變時(shí)，移動(dòng)圓球，同時(shí)旋轉(zhuǎn)唱片，從而動(dòng)態(tài)顯示歌曲播放
用于表示播放進(jìn)度的圓球移動(dòng)事件如下圖設(shè)置，注意每次移動(dòng)的距離根據(jù)歌曲的時(shí)間長(zhǎng)度而變化
移動(dòng)距離計(jì)算：播放背景長(zhǎng)度 除以 歌曲時(shí)長(zhǎng)（需要將歌曲時(shí)長(zhǎng)換算成秒，用time元件臨時(shí)保存）
旋轉(zhuǎn)唱片的設(shè)置事件
5、圓球移動(dòng)事件設(shè)置（表示播放進(jìn)度）
圓球在移動(dòng)時(shí)，需要設(shè)置一個(gè)邊界（放一個(gè)熱區(qū)作為邊界），當(dāng)圓球接觸邊界時(shí)，觸發(fā)播放的點(diǎn)擊事件（也就是暫停歌曲播放）
觸發(fā)事件設(shè)置如下
6、唱片狀態(tài)改變事件設(shè)置
當(dāng)唱片狀態(tài)改變時(shí)，需要根據(jù)唱片當(dāng)前顯示的狀態(tài)，分別設(shè)置歌曲名稱、作者、歌曲時(shí)間及要播放的歌曲
這個(gè)步驟不能少，否則在未播放狀態(tài)下點(diǎn)擊“上一首”或“下一首”按鈕時(shí)，歌曲名稱等不會(huì)變化
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。