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)面板控制歌曲播放進度，歌曲旋轉(zhuǎn)播放動效
4、通過文本元件預存歌曲播放時長（以秒為單位）
5、通過內(nèi)聯(lián)框架加載真實歌曲
6、用熱區(qū)控制用于表示播放進度圓球移動邊界
元件準備
1、頂部元素
1.1 2個文本矩形框，分別放作者名稱和歌曲名稱
1.2 1張表示返回的圖片
1.3 1張頂部背景（配置陰影效果，體現(xiàn)層級關系）
2、1張撥片圖片，用于體現(xiàn)歌曲播放或暫停的狀態(tài)
3、歌曲播放動效元素
3.1 1個白色矩形框，調(diào)整圓角半徑，使之成為圓形
3.2 1個黑色矩形框，調(diào)整圓角半徑，使之成為圓形
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、一個內(nèi)聯(lián)框架，用于實時加載歌曲
7、1個文本元件，用于表示當前播放歌曲的時間（秒殺）
8、動態(tài)面板，用于控制圖片循環(huán)及播放進度動效
將內(nèi)聯(lián)框架、時間舉行，循環(huán)面板位置放在不顯眼處，重新布局元件后效果如下：
實現(xiàn)步驟
1、播放按鈕設置
播放按鈕初始狀態(tài)是暫停待播放圖片，表示當前是暫停狀態(tài)；選中時，我們預置一張播放待暫停圖片，表示當前是播放狀態(tài)
點擊播放按鈕時，切換按鈕的選中狀態(tài)。分別設置選中、取消選中時的事件
選中時，啟動循環(huán)面板，每個0.5秒變換一次狀態(tài)，同時將播放撥片旋轉(zhuǎn)到唱片上；同時判斷當前面板的狀態(tài)，根據(jù)面板狀態(tài)分別設置歌曲名稱、作者、歌曲時間及要播放的歌曲
取消選中時，停止循環(huán)面板。將播放撥片旋轉(zhuǎn)到初始位置，同時在內(nèi)聯(lián)框架打開空鏈接（終止歌曲播放作用），將用于表示播放進度的圓球移到初始位置
循環(huán)動態(tài)面板設置事件
播放撥片設置事件，注意錨點偏移設置
在內(nè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)改變時，移動圓球，同時旋轉(zhuǎn)唱片，從而動態(tài)顯示歌曲播放
用于表示播放進度的圓球移動事件如下圖設置，注意每次移動的距離根據(jù)歌曲的時間長度而變化
移動距離計算：播放背景長度 除以 歌曲時長（需要將歌曲時長換算成秒，用time元件臨時保存）
旋轉(zhuǎn)唱片的設置事件
5、圓球移動事件設置（表示播放進度）
圓球在移動時，需要設置一個邊界（放一個熱區(qū)作為邊界），當圓球接觸邊界時，觸發(fā)播放的點擊事件（也就是暫停歌曲播放）
觸發(fā)事件設置如下
6、唱片狀態(tài)改變事件設置
當唱片狀態(tài)改變時，需要根據(jù)唱片當前顯示的狀態(tài)，分別設置歌曲名稱、作者、歌曲時間及要播放的歌曲
這個步驟不能少，否則在未播放狀態(tài)下點擊“上一首”或“下一首”按鈕時，歌曲名稱等不會變化
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。