4061人阅读
swif项目（4）
一 完善部分的QQ音乐效果图
二 需要完善点
1 歌曲的切换和暂停播放
2 歌曲当前播放时间和歌曲总时间的更新
3 进度条的处理
4 歌手头像处理
5 头像动画效果
6 歌词的进度显示
8 完善细节
三 添加歌曲展示页面中的动画效果
1 代码书写位置 : 由于展示歌词的控制器的UITableViewController,那么我们可以使用代理方法.当用户拖动tableView的时候,会调用一个方法,在该方法中实现动画效果
2 思路 : 通过拿到第一个cell和最后一个cell来计算中间cell的索引值,然后遍历所有的索引,取出cell在分别计算各个cell的x值.就可以达到目的.
3 直接奉上代码 :
override func scrollViewDidScroll(scrollView: UIScrollView) {
guard let indexRows = tableView.indexPathsForVisibleRows else {
let firstCell = indexRows.first?.row ?? 0
let lastCell = indexRows.last?.row ?? 0
let middleCell = Int(Float(firstCell + lastCell) * 0.5)
for indexRow in indexRows {
let cell = tableView.cellForRowAtIndexPath(indexRow)
cell?.x = CGFloat(abs(indexRow.row - middleCell) * 40)
print(indexRow.row - middleCell)
四 处理音乐切换和暂停播放
1 通过在storyboard中自动布局,达到下面图中的效果(这里我就不一 一细说了,都是基本)
2 通过从storyboard拖线的方式我们可以拿到需要设置的东西
—-& 2.1 注意摆放位置 : 这里我们按照经常需要改变的属性和只改变一次属性的模式来摆放代码.
3 代码部分 :
—-& 3.1 只需要改变一次的属性(里面包含了上一篇中的部分属性)
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var singerLabel: UILabel!
@IBOutlet weak var totalLabel: UILabel!
@IBOutlet weak var singerImageView: UIImageView!
@IBOutlet weak var lrcSImageView: UIScrollView!
@IBOutlet weak var backImageView: UIImageView!
@IBOutlet weak var playOrPause: UIButton!
—-& 3.2 经常需要改变的属性(里面包含了上一篇中的部分属性)
@IBOutlet weak var currentLabel: UILabel!
@IBOutlet weak var lrcLabel: UILabel!
@IBOutlet weak var silderProgress: UISlider!
4 封装工具类(封装调用思想: 三层调用)
—-& 4.1 工具类一 : 对单首音乐的播放状态工具类(往里面添加继续播放;暂停播放的方法)
———-& 4.1.1 该部分代码 :
func playMusic() {
player?.play()
func pauseMusic() {
player?.pause()
—-& 4.2 工具类二 : 在负责音乐的业务逻辑工具类(获取最新音乐数据;重新播放音乐;暂停播放音乐;上一首和下一首)
———-& 4.2.1 记录播放歌曲的索引
var musicList : [XFJQQMusicListItem]?
var index = 0 {
if index & 0 {
index = (musicList?.count ?? 0) - 1
if index & ((musicList?.count ?? 0) - 1){
———-& 4.2.2 创建另外一个模型
———-& 4.2.3 问题 : 怎么才能当前创建的模型具有第一个模型中的属性呢?
———-& 4.2.4 解决 : 才用拥有的方法(让第一个模型作为第二个模型中的属性)
———-& 4.2.5 新创建的模型需要考虑到的属性 : 当前播放时间;歌曲总时间;播放状态
———-& 4.2.6 设计属性采用的方法 : 对当前时间和总歌曲时间提供get方法
———-& 4.2.7 具体代码如下 :
class XFJQQMusicNewMessageModel: NSObject {
//* 让该模型拥有显示歌单的模型 /
var QQMusicItem : XFJQQMusicListItem?
//* 当前播放的时间 /
var costTime : NSTimeInterval = 0
//* 总播放的时间 /
var totalTime : NSTimeInterval = 0
//** 提供当前时间和总时间的get方法 */
var costFormatTime : String {
return XFJQQTimeTool.getTime(costTime)
//** 提供总时间的get方法 */
var totalFormatTime : String {
return XFJQQTimeTool.getTime(totalTime)
//** 播放的状态 */
var isPlaying : Bool = false
—-& 4.3 在回到负责音乐业务类的工具类中.提供一个方法,负责返回最新的数据
func getQQMusicNewMessage() -&XFJQQMusicNewMessageModel {
QQMusicMessageModel.QQMusicItem = musicList![index]
QQMusicMessageModel.costTime = tool.player?.currentTime ?? 0
QQMusicMessageModel.totalTime = tool.player?.duration ?? 0
QQMusicMessageModel.isPlaying = tool.player?.playing ?? false
return QQMusicMessageModel
—-& 4.4 在该业务中提供一个方法对音乐的处理(判断音乐列表;记录当前播放音乐的索引)
func playMusic(musicM : XFJQQMusicListItem) {
let fileName = musicM.filename ?? ""
tool.playMusic(fileName)
if musicList == nil {
index = (musicList?.indexOf(musicM))!
—-& 4.5 在该类中在封装一层方法(方法内部分别调用在对单首音乐处理的方法中的继续播放和暂停播放的方法;上一首;下一首的方法)
—-& 4.5.1 重新播放和暂停播放代码 :
func playCurrentMusic() -&() {
tool.playMusic()
func pauseCurrentMusic() {
tool.pauseMusic()
—-& 4.5.2 上一首和下一首代码 :
func preMusic() {
index -= 1
if let muiscM = musicList {
let music = muiscM[index]
playMusic(music)
func nextMusic() {
index += 1
if let musicM = musicList {
let music = musicM[index]
playMusic(music)
—-& 4.6 工具类三 : 对音乐播放的时间和音乐总时间的处理(转化为具体的分钟和秒钟)
—-& 4.6.1 具体代码详解 :
class XFJQQTimeTool: NSObject {
class func getTime(time : NSTimeInterval) -&String {
let min = Int(time / 60)
let sec = Int(time) % 60
let resultStr = String(format: "%02d:%02d", min,sec)
return resultStr
—-& 4.7 提供两个方法(分别用来作为该内部调用的 : 对经常执行的和不经常的方法分开存放 )—& 同样采用了分层存放的方法
—-& 4.7.1 在展示歌词的类扩展中设置两个方法(详见代码: 该部分上篇博客已经讲解了)
private func setUpOnce() {
setUpViewOnce()
setUpSilder()
private func setUpTimes() {
setUpViewFrame()
setUpForeImage()
—-& 4.8 根据从storyboard中得到的数据,采用最新创建的模型中的数据来对其赋值(只需要设置一次 : 详见代码)
private func setUpDataTime() -&() {
let musicMessageModel = XFJQQMusicOperationTool.shareInstance.getQQMusicNewMessage()
nameLabel.text = musicMessageModel.QQMusicItem?.name
singerImageView.image = UIImage(named: (musicMessageModel.QQMusicItem?.icon ?? ""))
backImageView.image = UIImage(named: (musicMessageModel.QQMusicItem?.icon)!)
singerLabel.text = musicMessageModel.QQMusicItem?.singer
totalLabel.text = "\(musicMessageModel.totalFormatTime)"
—-& 4.9 根据从storyboard中得到的数据,采用最新创建的模型中的数据来对其赋值(只需要设置多次 : 详见代码)
func setUpDatasTimes() {
let musicMessageModel = XFJQQMusicOperationTool.shareInstance.getQQMusicNewMessage()
currentLabel.text = "\(musicMessageModel.costFormatTime)"
silderProgress.value = Float(musicMessageModel.costTime / musicMessageModel.totalTime)
playOrPause.selected = musicMessageModel.isPlaying
—-& 4.10 由于用户需要点击具体的按钮来切换相应的业务逻辑,那么我们也采取拖线的方式来达到效果
—-& 4.11 播放和暂停(用单例直接调用工具类中设置的方法)
@IBAction func playAndPause(button : UIButton)
button.selected = !button.selected
if button.selected {
XFJQQMusicOperationTool.shareInstance.playCurrentMusic()
XFJQQMusicOperationTool.shareInstance.pauseCurrentMusic()
—-& 4.11 歌曲的切换(直接调用工具类中封装的方法和对属性进行设置的方法)
@IBAction func preButton()
let operationTool = XFJQQMusicOperationTool.shareInstance
//调用播放上一首的方法
operationTool.preMusic()
setUpDataTime()
@IBAction func nextButton()
let operationTool = XFJQQMusicOperationTool.shareInstance
operationTool.nextMusic()
setUpDataTime()
—-& 4.12 退出(直接pop就可以)
@IBAction func popVC()
?.popViewControllerAnimated()
—-& 4.13 当前时间和歌曲总时间的处理(采用定时器)–&里面创建定时器和方法的调用我这里就不写出来了
func addTimer() {
timer = NSTimer(timeInterval: 1, target: self, selector: "setUpDatasTimes", userInfo: nil, repeats: true)
NSRunLoop.currentRunLoop().addTimer(timer!, forMode: NSRunLoopCommonModes)
func removeTimer() -&() {
timer?.invalidate()
timer = nil
五 歌手头像动画处理(头像旋转)
1 头像的暂停动画和恢复动画我们采用一个分类(下面的分类中的代码 : 暂时没研究是怎么实现的)
extension CALayer {
func pauseAnimate()
let pausedTime: CFTimeInterval = convertTime(CACurrentMediaTime(), fromLayer: nil)
speed = 0.0;
timeOffset = pausedT
func resumeAnimate()
let pausedTime: CFTimeInterval = timeOffset
speed = 1.0;
timeOffset = 0.0;
beginTime = 0.0;
let timeSincePause: CFTimeInterval = convertTime(CACurrentMediaTime(), fromLayer: nil) - pausedTime
beginTime = timeSinceP
2 处理动画
—-& 2.1 通过在类扩展中提供三个方法(恢复动画;暂停动画;添加动画)
—-& 2.2 恢复动画和暂停动画
private func resumeAnimation() {
foreImageView.layer.resumeAnimate()
private func pauseAnimation() {
foreImageView.layer.pauseAnimate()
—-& 2.3 添加动画
private func addAnimation() {
foreImageView.layer.removeAnimationForKey("rotation")
let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.duration = 30
animation.fromValue = 0
animation.toValue = M_PI * 2
animation.repeatCount = MAXFLOAT
animation.removedOnCompletion = false
foreImageView.layer.addAnimation(animation, forKey: "rotation")
3 动画调用 :
—-& 3.1 用户点击播放和暂停按钮的时候,需要调用
@IBAction func playAndPause(button : UIButton)
button.selected = !button.selected
if button.selected {
XFJQQMusicOperationTool.shareInstance.pauseCurrentMusic()
pauseAnimation()
XFJQQMusicOperationTool.shareInstance.playCurrentMusic()
resumeAnimation()
—-& 3.2 当用户点击显示歌曲的tableView中的cell,页面开始跳转后需要动画效果.(只需要设置一次)
lrcTVC.dataSource = lrcMs
addAnimation()
if musicMessageModel.isPlaying {
resumeAnimation()
pauseAnimation()
六 歌词的展示(比较有难度)
1 封装处理歌词的工具类.(封装原因 : 展示出来的数据并不符合格式,需要我们做处理)–&下图展示的是需要处理的歌词数据
2 创建歌词展示的模型(模型中需要的属性 : 歌曲开始时间;歌曲结束时间;歌词内容)
class XFJQQLrcModel: NSObject {
var beginTime : NSTimeInterval = 0
var endTime : NSTimeInterval = 0
var lrcStr : String = ""
3 处理歌词工具类的文件
4 在该工具类中创建一个方法能返回具体哪行返回的歌词(采用元组的方法)
class func getLrcMusicRow(current : NSTimeInterval, lrcModel : [XFJQQLrcModel]) -&(row :Int, lrcM : XFJQQLrcModel){
let count = lrcModel.count
for i in 0..&count {
let lrcM = lrcModel[i]
if lrcM.beginTime & current && lrcM.endTime & current {
return (i, lrcM)
return (0, XFJQQLrcModel())
5 设计一个方法: 当外界调用的时候传入首歌曲的歌词,然后经过该方法,返回一个解析好的可实现的歌词.
—-& 5.1 处理该部分的歌词 :
—-& 5.2 代码(类方法)–& 里面包括 : 异常处理;将歌词转换为一行一行的显示;过滤掉不能处理的符号;装入模型中(该方法的上部分)
class func getLrcMusicData(fileName : String?) -&[XFJQQLrcModel] {
guard let path = NSBundle.mainBundle().pathForResource(fileName, ofType: nil) else{
return [XFJQQLrcModel]()
var contentLrc = ""
contentLrc = try String(contentsOfFile: path)
print(error)
return [XFJQQLrcModel]()
let lrcArray = ponentsSeparatedByString("\n")
var lrcMs = [XFJQQLrcModel]()
for lrcmStr in lrcArray {
if lrcmStr.containsString("[ti:") || lrcmStr.containsString("[ar:") || lrcmStr.containsString("[al:") {
let lrcm = XFJQQLrcModel()
lrcMs.append(lrcm)
6 通过调用处理好的歌词的方法来处理过滤好的歌词
[00:00.89]传奇
[00:02.34]作词：刘兵
[00:03.82]作曲：李健
[00:05.48]演唱：王菲
—-& 6.1 代码 :
let resultStr = lrcmStr.stringByReplacingOccurrencesOfString("[", withString: "")
let timeAndContent = ponentsSeparatedByString("]")
if timeAndContent.count == 2 {
let time = timeAndContent[0]
lrcm.beginTime = XFJQQTimeTool.getLrcFormatTime(time)
let content = timeAndContent[1]
lrcm.lrcStr = content
let count = lrcMs.count
for i in 0..&count {
if i != count - 1 {
lrcMs[i].endTime = lrcMs[i + 1].beginTime
return lrcMs
—-& 6.2 对能处理的歌词方法的调用
class func getLrcFormatTime(time : String) -&NSTimeInterval {
let minAndSec = time.componentsSeparatedByString(":")
if minAndSec.count == 2 {
let min = NSTimeInterval(minAndSec[0]) ?? 0
let sec = NSTimeInterval(minAndSec[1]) ?? 0
return min * 60 + sec
7 将处理好的歌词交给显示歌词的tableView来显示
let lrcMs = XFJQQMusicLrcDataTool.getLrcMusicData(musicMessageModel.musicModel?.lrcname)
print(lrcMs)
lrcTVC.dataSource = lrcMs
8 之间用来显示歌词的是UIView,现在我们使用UITableView来显示,将使用到UIView显示歌词的地方全都用tableView来代替.
9 实现tableView中数据源发方法
MARK : - 数据源方法
extension XFJQQLrcTVC {
override func numberOfSectionsInTableView(tableView: UITableView) -& Int {
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -& Int {
return dataSource.count
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -& UITableViewCell {
let cell = XFJQQMusicLrcCell.getMusicLrcCell(tableView)
if indexPath.row == scrollRow {
cell.progress = progress
cell.progress = 0.0
let lrcStr = dataSource[indexPath.row]
cell.lrcStr = lrcStr.lrcStr
return cell
10 自定义cell和自定义显示歌词的label
—-& 10.1 自定义cell(该部分是对cell中label的显示)
@IBOutlet weak var lrcLabel: XFJQQMusicLrcLabel!
var progress : Double = 0.0 {
lrcLabel.progress = progress
var lrcStr : String = "" {
lrcLabel.text = lrcStr
—-& 10.2 返回创建好的cell
MARK : - 再累扩展中提供一个方法,返回cell
extension XFJQQMusicLrcCell {
class func getMusicLrcCell(tableView : UITableView) -&XFJQQMusicLrcCell {
let lrcCellID = "lrcCell"
var cell = tableView.dequeueReusableCellWithIdentifier(lrcCellID) as? XFJQQMusicLrcCell
if cell == nil {
cell = NSBundle.mainBundle().loadNibNamed("XFJQQMusicLrcCell", owner: nil, options: nil).first as? XFJQQMusicLrcCell
return cell!
—-& 10.3 自定义label
class XFJQQMusicLrcLabel: UILabel {
//自定义更新歌词的进度(提供set方法)
var progress : Double = 0.0 {
setNeedsDisplay()
override func drawRect(rect: CGRect) {
super.drawRect(rect)
//设置填充颜色
UIColor.greenColor().set()
let progressloat = CGFloat(progress)
let rect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width * progressloat, rect.size.height)
UIRectFillUsingBlendMode(rect, CGBlendMode.SourceIn)
11 当有歌词歌曲变化的时候,立刻更新歌词的数据
var dataSource : [XFJQQLrcModel] = [XFJQQLrcModel]() {
tableView.reloadData()
12 在显示歌词的tableView控制器中设置一个属性用来提供正在歌唱的歌词始终处于tableView的中间cell
var scrollRow : Int = 0 {
if scrollRow != oldValue {
tableView.reloadRowsAtIndexPaths(tableView.indexPathsForVisibleRows!, withRowAnimation: UITableViewRowAnimation.Fade)
let indexPath = NSIndexPath(forRow: scrollRow, inSection: 0)
tableView.scrollToRowAtIndexPath(indexPath, atScrollPosition: UITableViewScrollPosition.Middle, animated: true)
13 给正在歌唱的cell中的歌词设置进度(set方法)
var progress : Double = 0.0 {
let indexPath = NSIndexPath(forRow: scrollRow, inSection: 0)
let cell = tableView.cellForRowAtIndexPath(indexPath) as? XFJQQMusicLrcCell
cell?.progress = progress
14 处理已进入展示歌词的页面,歌词的头部位置处于tableView的中间部位
//在view将要布局的时候对显示歌词的view布局,让其头部显示在中间
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tableView.contentInset = UIEdgeInsets(top: tableView.height * 0.5, left: 0, bottom: tableView.height * 0.5, right: 0)
15 更新滚动时候的歌词(该方法调用频繁)
func updateLrc () -&() {
let musicMessageModel = XFJQQMusicOperationTool.shareInstance.getUpNewMusicMessage()
let rowLrm = XFJQQMusicLrcDataTool.getLrcMusicRow(musicMessageModel.costTime, lrcModel:lrcTVC.dataSource)
let row = rowLrm.row
lrcTVC.scrollRow = row
let lrcm = rowLrm.lrcM
lrcLabel.text = lrcm.lrcStr
let value = (musicMessageModel.costTime - lrcm.beginTime) / (lrcm.endTime - lrcm.beginTime)
lrcLabel.progress = value
lrcTVC.progress = value
16 怎么才能让歌词滚动呢? 通过系统的一个类CADisplayLink(和定时器作用差不多,这里我代码就不写上了)
七 注意点和性能优化
1 注意 : 退出后台动画不再旋转—& 解决方案 : 动画完成之后,不需要移除
2 怎么样将歌词分割成一行一行,然后展示呢?—&解决方案 : 通过设置一个歌词模型来展示
3 歌词不滚动?—& 解决方案 : CADisplayLink(类似定时器)
4 歌词显示的时候出现了刷新问题?—& 解决方案 : 先刷新,在滚动
5 性能优化 : 图片绘制的次数太多?
—-& 5.1 解决方案 : 通过设置一个属性记录歌词的行值,然后判断是否是同一行
6 当前显示的时间一直在更新,暂停的时候不需要更新,也可以优化(留给你们实现了)
八 功能补充(额外的想法,还未实现)
1 拖动进度条达到快进的目的
2 后台模式(后面会抽时间补上)
3 摇一摇切换歌曲
1 该篇博客写的思路还算清晰,唯一的缺点是我无法在后面歌词显示部分更加详细点说明,因为该处真是没办法说明了,只能奉上我写的代码了.
2 本篇博客是基于QQ音乐的swift版本,还有很多的功能没有实现,希望后面我能抽出时间进一步的完善也希望阅读过我博客的程序猿能提供意见.
3 最后,由于时间一直没有抽出来,这使得博客更新的速度有点慢,后续我会慢慢补上.如果大家觉的我写的还可以,麻烦大家关注我的官方博客,谢谢!!!!
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：83234次
积分：1878
积分：1878
排名：第14963名
原创：96篇
评论：12条
(1)(9)(17)(24)(20)(9)(19)五大指标看懂QQ音乐如何称霸数字音乐市场
（原标题：五大指标看懂QQ音乐如何称霸数字音乐市场）
比达咨询近日发布了《2015年第3季度中国手机音乐APP市场研究报告》，称得益于智能手机的普及，手机音乐已进入快速发展阶段，手机音乐APP也成为了手机音乐行业增长的主力军。如何选择手机音乐APP？权利当然是掌握在用户手中;而对于数字音乐平台来说，综合实力才是硬道理！
五项冠军 QQ音乐成为品牌表现力最强数字音乐平台
此次报告以知名度、正版曲库丰富度、线上线下体验、社交互动能力和商业创新力五大指标为数字音乐平台“把脉”，QQ音乐以“五项冠军”的成绩，成为了行业领头羊。
在最具有未来性的“商业创新”能力，QQ音乐一枝独秀，领先其他对手最多;而其他平台的发展，均有明显优劣势，在老二的争夺上拉锯不断。
基于数据分析，比达认为：除了背靠腾讯品牌、产品在知名度和社交互动能力方面具有优势外，QQ音乐还拥有正版曲库1500万首;而其在线上线下用户体验的优势主要体现在包括一系列O2O演唱会的举办和线上数字专辑的销售等。
大幅领先20余个百分点 QQ音乐品牌认知度最高
在与用户息息相关的品牌认知度方面，QQ音乐以高达89.7%的比率位列第一，与排在二、三位的酷狗酷我拉开近20个百分点。
比达分析，由于成立时间早，这几个领先的平台积累用户较多、定位加更大众化，覆盖人群较为广泛，另外，如QQ音乐通过强大的社交及引流功能，也进一步形成了更加稳定的用户群体和品牌形象。
用户都是“活粉” QQ音乐活跃度被两份报告点赞
在社交媒体时代，用户群中的口碑因素对于音乐产品推广将起到越来越重要的作用。比达咨询指出，近半年来，QQ音乐月活跃用户数环比增长也是最快的。
根据此前梅花网报告数据，QQ音乐相较于其他音乐软件在微博上拥有更高的关注度，同时还在互动量、活跃度和热议度三大评定指数排在了第一;除了分享朋友圈之外，数字音乐专辑独家首发使其也成为了乐迷们及明星粉丝聚集地，为喜欢的歌手、综艺打榜，最终影响到比赛进程、或歌手排名也增加了用户的参与度。
“商业价值”关键词高亮比达咨询点评音乐平台发展趋势
对于未来音乐平台的发展趋势，比达咨询分析指出：2015年第3季度，中国手机音乐APP的用户规模达到了3.94亿，同比增长率为8.8%。手机音乐APP的用户渗透率已达到较高程度，但用户增速放缓，用户人口红利空间的缩减意味着未来音乐APP将把注意力从追求新用户转向挖掘平台手中已有用户的商业价值。
目前，如网易云音乐、QQ音乐等国内数字音乐商业模式上创新领先的平台，都在不断推出新的模式和产品。其中QQ音乐除了已经发展比较成熟的会员模式外以及创下600万销量的数字专辑外，也在积极构建能完美适配互联网时代的演出生态模式。同时，QQ音乐与网易云音乐、多米音乐之间的版权转授等合作模式也开始被业内主要平台所认可接受，并成为新的商业模式趋势。
本文来源：中华网
48小时评论排行
评论9738条
评论2636条
评论2140条
评论2003条
评论1084条
不做嘴炮 只管约到
跟贴热词：
文明上网，登录发贴
网友评论仅供其表达个人看法，并不表明网易立场。
热门产品:　　　
:　　　　　　　　
:　　　　　　　　　
热门影院：
热门搜索：
用微信扫描二维码分享至好友和朋友圈为什么我用QQ音乐播放音乐，好友看不到我头像边的同步显示？_百度知道
为什么我用QQ音乐播放音乐，好友看不到我头像边的同步显示？
开了QQ后未反应过来，也有可能是你在开QQ前听音乐很正常，可能属于网络问题，应该不属于什么大问题
其他类似问题
为您推荐：
qq音乐的相关知识
其他1条回答
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}