基本演示效果圖如下
QQmusic.gif
整體步驟如下:
1.搭建界?
2.修改?面的?一些內(nèi)容
- 添加毛玻璃效果
- 將專輯圖片添加圓?
- 設(shè)置slider的滑塊的圖?
- 狀態(tài)欄的改變
3.封裝了工具類(Music數(shù)據(jù)?工具)
- 返回所有的數(shù)據(jù)
- 設(shè)置當(dāng)前播放的歌曲的方法
- 返回當(dāng)前播放歌曲
- 獲取下一首歌曲
- 獲取上一首歌曲
4.開始播放?樂
- 基本界面的設(shè)置
- 設(shè)置當(dāng)前時間和總時間(AVAudioPlayer)
- 開始?樂—>專輯圖片添加動畫
- 隨著時間改變slider的進(jìn)度和當(dāng)前播放時間的Label的?字
5.對滑塊的事件處理
- touchDown—>移除定時器
- touchUpInside—>改變歌曲播放的時間/添加定時器
- valueChange—>改變滑塊的位置/改變當(dāng)前播放時間的Label的?字
- 添加點擊?手勢—>獲取點擊位置的?比例—>計算應(yīng)該歌曲播放時間
6.對歌曲事件處理
- 暫停/播放
- 上一首
- 下??
- 當(dāng)歌曲正常播放完成,自動播放下一?
7.添加ScrollView(lrcView)
- 自定義LrcView
- 在ScrollView中添加tableView—>約束問題
8.解析歌詞
- 給ScrollView定義了lrcname屬性
- 定義了?具類—>解析歌詞—>返回歌詞數(shù)據(jù)(NSArray)
- tableView展示歌詞
- 設(shè)置?系列tableView
- 設(shè)置tableView額外滾動區(qū)域
9.顯?對應(yīng)的句歌詞
- 給ScrollView定義了currentTime
- 定義了CADisplayLink—>添加定時器
- 用currentTime和lrclist所有的歌詞的時間對比
- 找到應(yīng)該顯示lrclist中的某?句歌詞(對應(yīng)的下標(biāo))
- 刷新該句的歌詞(cell)—>讓文字變大—> 定義currentIndex—>刷新兩句將當(dāng)前句的Cell滾動到bottom/top
10.當(dāng)可以顯?某一個句歌詞之后,讓該句歌詞漸變效果
- 自定義Label—>drawRect—>設(shè)置顏色—>UIRectFillUsingBlendMode(設(shè)置漸變)
- 給自定義Label傳?進(jìn)度
- 自定義cell,并且將label加入cell中
- 拿到當(dāng)前顯示的Cell—>設(shè)置label的進(jìn)度—>當(dāng)前時間-當(dāng)前句開始時間/下一句的時間-當(dāng)前句的時間
- 外面Label—>引用傳給ScrollView—>改變顯示文字和進(jìn)度
