仿QQMusic(附源码)

基本演示效果图如下

QQmusic.gif

整体步骤如下:

1.搭建界⾯

2.修改⾯面的⼀一些内容

• 添加毛玻璃效果
• 将专辑图片添加圆⾓
• 设置slider的滑块的图⽚
• 状态栏的改变

3.封装了工具类(Music数据⼯工具)

• 返回所有的数据
• 设置当前播放的歌曲的方法
• 返回当前播放歌曲
• 获取下一首歌曲
• 获取上一首歌曲

4.开始播放⾳乐

• 基本界面的设置
• 设置当前时间和总时间(AVAudioPlayer)
• 开始⾳乐—>专辑图片添加动画
• 随着时间改变slider的进度和当前播放时间的Label的⽂字

5.对滑块的事件处理

• touchDown—>移除定时器
• touchUpInside—>改变歌曲播放的时间/添加定时器
• valueChange—>改变滑块的位置/改变当前播放时间的Label的⽂字
• 添加点击⼿手势—>获取点击位置的⽐比例—>计算应该歌曲播放时间

6.对歌曲事件处理

• 暂停/播放
• 上一首
• 下⼀⾸
• 当歌曲正常播放完成,自动播放下一⾸

7.添加ScrollView(lrcView)

• 自定义LrcView
• 在ScrollView中添加tableView—>约束问题

8.解析歌词

• 给ScrollView定义了lrcname属性
• 定义了⼯具类—>解析歌词—>返回歌词数据(NSArray)
• tableView展示歌词
• 设置⼀系列tableView
• 设置tableView额外滚动区域

9.显⽰对应的句歌词

• 给ScrollView定义了currentTime
• 定义了CADisplayLink—>添加定时器
• 用currentTime和lrclist所有的歌词的时间对比
• 找到应该显示lrclist中的某⼀句歌词(对应的下标)
• 刷新该句的歌词(cell)—>让文字变大—> 定义currentIndex—>刷新两句将当前句的Cell滚动到bottom/top

10.当可以显⽰某一个句歌词之后,让该句歌词渐变效果

• 自定义Label—>drawRect—>设置颜色—>UIRectFillUsingBlendMode(设置渐变)
• 给自定义Label传⼊进度
• 自定义cell,并且将label加入cell中
• 拿到当前显示的Cell—>设置label的进度—>当前时间-当前句开始时间/下一句的时间-当前句的时间
• 外面Label—>引用传给ScrollView—>改变显示文字和进度

源码地址:https://github.com/AndyZhaoHe/QQMusic