卡拉OK效果的实现-iOS音乐播放器

简介: 自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单。 直接上原理: 第一种: 原理就是创建一个UILabel,设置一下UILabel的lineBreakMode属性为NSL...

自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单。

直接上原理:

第一种:

原理就是创建一个UILabel,设置一下UILabel的lineBreakMode属性为NSLineBreakByClipping(这样的话就是的内容过多的话就会不显示,所以UILabel的宽度设置成0,就会不显示内容,然后用定时器不断更改宽度,内容也就会不断地显示出来,覆盖掉原本的内容,字体颜色要设成颜色不一样的,默认都是黑色,所以要改个其他的颜色,不然的话效果就看不出来了),位置大小和内容文本的位置一样,高度也一样,就会给人一种卡拉OK的效果。

在我的这个作品中效果不是很好,因为我用的是UIPickerView来显示歌词的,UILabel的字体就要和UIPickerView的文本字体一样,所以就有点难度,当然了,如果你要覆盖的字体可以自定义字体大小的话那就另当别论了,所以我还有一种方法。

第二种:

这种方法和第一种差不多,因为我采用的是UIPickerView来显示的歌词(当前显示歌词的高度为60),所以用第一种效果不是很好,所以我直接定义两个一模一样的UILabel,一个底部的UILabel宽度和屏幕一样宽,但是内容是居中的,然后就是顶部的UILabel,首先设置字体和底部的字体一样大,接着设置UILabel的内容和底部的内容一样,起始位置就是x就是屏幕宽的一半减去根据字体得到宽度的一半,y就是屏幕的高的二分之一减去30,高为60,宽为0,因为宽是要不断增加的,这样才能有卡拉OK的效果。

总结一下:第一种方法是只有一个UILabel,直接覆盖到原文本上,如果原文本字体可以自己设置的话就足够了,第二种则是比较强大的,就相当于先定义一个把原来的覆盖掉,然后在接着覆盖。

下面我说一下核心的代码片段(篇未有源码下载地址):

 因为采用的是UIPickerView,所以显示歌词需要判断一下,下面的这个方法不只是每显示一行调用一次,所以要判断一下

//根据字体大小来设置高度或宽度

-(CGRect)boundingRectWithInitSize:(CGSize)size

{

    

    self.jianbian.lineBreakMode=NSLineBreakByClipping;

    CGRect rect=[self.jianbian.text boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:[NSDictionary dictionaryWithObjectsAndKeys:self.jianbian.font,NSFontAttributeName, nil] context:nil];

    return rect;

}

//显示歌词

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

{

    _jishu++;

    //根据字体调整frame的大小

    CGRect myRect;

    myRect=[self boundingRectWithInitSize:CGSizeMake(0, 60)];

    //设置底部的UILabel的大小和起始位置

    self.jianbiant.frame=CGRectMake(Kuan, (Gao-20)/12.0*5-30,Kuan, 60);

    //设置顶部的UILabel的大小和起始位置

    self.jianbian.frame=CGRectMake(Kuan+Kuan/2-myRect.size.width/2, (Gao-20)/12.0*5-30,0, 60);

    //因为UIPickerView比较特殊,所以需要判断当前正在显示的内容,把需要显示的内容设置成底部和顶部UILabel的内容

    if (_jishu==2 && row<((NSArray*)self.geCiShuZu[_diJiGe]).count-1) {

         _jianbiant.text=self.geCiShuZu[_diJiGe][row][@"lyric"];

        _jianbian.text=_jianbiant.text;

        _kuan=myRect.size.width;

        _jishu=0;

    }

    if (_jishu==1 && row==((NSArray*)self.geCiShuZu[_diJiGe]).count-1)

    {

        if (_hehe)

        {

            _jianbiant.text=self.geCiShuZu[_diJiGe][row][@"lyric"];

            _jianbian.text=_jianbiant.text;

            _kuan=myRect.size.width;

            _jishu=0;

            _hehe=NO;

        }

        _hehe=YES;

    }

    _zongkuan=0;

    return self.geCiShuZu[_diJiGe][row][@"lyric"];

}

 

 

下面是运行时的图片:

    

 

 

源码有好几个文件,所以我打包了有兴趣的可以下载一下(这个也是可以快进快退的进度条和歌曲还有歌词全部同步,左滑显示歌词,上下滑动歌词歌曲会同步,进度条也会同步,同样的左右滑动进度条歌的进度和歌词的进度也会改变):

http://download.csdn.net/detail/yz18337161090/9457997

 

 

 

 

 

相关文章
|
安全 数据安全/隐私保护 iOS开发
iOS小技能:【发红包】使用tweak和lua脚本结合进行实现
我们开发的大部分越狱程序,都是编译成动态链接库(`例如:介绍的越狱程序(Tweak)开发,就是动态链接库。`),然后通过越狱平台的MobileSubstrate(iOS7上叫CydiaSubstrate)来加载进入目标程序(Target),通过对目标程序的挂钩(Hook),来实现相应的功能。
262 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0
|
存储 数据处理 iOS开发
iOS开发-本地推送实现方法和数据处理方案(二)
iOS开发-本地推送实现方法和数据处理方案(二)
167 0
|
存储 数据处理 iOS开发
iOS开发-本地推送实现方法和数据处理方案(一)
iOS开发-本地推送实现方法和数据处理方案(一)
208 0
|
iOS开发
iOS开发 - 不通过import引入类名实现push或present
iOS开发 - 不通过import引入类名实现push或present
75 0
|
Android开发 iOS开发
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
354 0
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
|
存储 安全 iOS开发
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
397 0
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
|
Swift 数据安全/隐私保护 iOS开发
iOS开发 - swift通过Alamofire实现https通信
iOS开发 - swift通过Alamofire实现https通信
342 0
iOS开发 - swift通过Alamofire实现https通信
|
开发者 iOS开发
iOS开发 - 用AFNetworking实现https单向验证,双向验证
iOS开发 - 用AFNetworking实现https单向验证,双向验证
342 0
iOS开发 - 用AFNetworking实现https单向验证,双向验证
|
iOS开发
iOS小技能:自动布局实现兄弟控件N等分且宽高比例是1:N(xib 上实现)
本文为 iOS视图约束专题的第三篇:xib上使用自动布局教程
140 0