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