卡拉OK效果的實現(xiàn)-iOS音樂播放器

自己編寫的音樂播放器偶然用到這個模塊,發(fā)現(xiàn)沒有思路,而且上網(wǎng)搜了搜,關(guān)于這方面的文章不是很多,沒找到滿意的結(jié)果,然后自己也是想了想,最終實現(xiàn)了這種效果,想通了發(fā)現(xiàn)其實很簡單。

直接上原理:

第一種:

原理就是創(chuàng)建一個UILabel,設(shè)置一下UILabel的lineBreakMode屬性為NSLineBreakByClipping(這樣的話就是的內(nèi)容過多的話就會不顯示,所以UILabel的寬度設(shè)置成0,就會不顯示內(nèi)容,然后用定時器不斷更改寬度,內(nèi)容也就會不斷地顯示出來,覆蓋掉原本的內(nèi)容,字體顏色要設(shè)成顏色不一樣的,默認都是黑色,所以要改個其他的顏色,不然的話效果就看不出來了),位置大小和內(nèi)容文本的位置一樣,高度也一樣,就會給人一種卡拉OK的效果。

在我的這個作品中效果不是很好,因為我用的是UIPickerView來顯示歌詞的,UILabel的字體就要和UIPickerView的文本字體一樣,所以就有點難度,當然了,如果你要覆蓋的字體可以自定義字體大小的話那就另當別論了,所以我還有一種方法。

第二種:

這種方法和第一種差不多,因為我采用的是UIPickerView來顯示的歌詞(當前顯示歌詞的高度為60),所以用第一種效果不是很好,所以我直接定義兩個一模一樣的UILabel,一個底部的UILabel寬度和屏幕一樣寬,但是內(nèi)容是居中的,然后就是頂部的UILabel,首先設(shè)置字體和底部的字體一樣大,接著設(shè)置UILabel的內(nèi)容和底部的內(nèi)容一樣,起始位置就是x就是屏幕寬的一半減去根據(jù)字體得到寬度的一半,y就是屏幕的高的二分之一減去30,高為60,寬為0,因為寬是要不斷增加的,這樣才能有卡拉OK的效果。

總結(jié)一下:第一種方法是只有一個UILabel,直接覆蓋到原文本上,如果原文本字體可以自己設(shè)置的話就足夠了,第二種則是比較強大的,就相當于先定義一個把原來的覆蓋掉,然后在接著覆蓋。

下面我說一下核心的代碼片段(篇未有源碼下載地址):

因為采用的是UIPickerView,所以顯示歌詞需要判斷一下,下面的這個方法不只是每顯示一行調(diào)用一次,所以要判斷一下

//根據(jù)字體大小來設(shè)置高度或?qū)挾?/p>

-(CGRect)boundingRectWithInitSize:(CGSize)size

{

self.jianbian.lineBreakMode=NSLineBreakByClipping;

CGRectrect=[self.jianbian.textboundingRectWithSize:sizeoptions:NSStringDrawingUsesLineFragmentOriginattributes:[NSDictionarydictionaryWithObjectsAndKeys:self.jianbian.font,NSFontAttributeName,nil]context:nil];

returnrect;

}

//顯示歌詞

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

{

_jishu++;

//根據(jù)字體調(diào)整frame的大小

CGRectmyRect;

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

//設(shè)置底部的UILabel的大小和起始位置

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

//設(shè)置頂部的UILabel的大小和起始位置

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

//因為UIPickerView比較特殊,所以需要判斷當前正在顯示的內(nèi)容,把需要顯示的內(nèi)容設(shè)置成底部和頂部UILabel的內(nèi)容

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;

returnself.geCiShuZu[_diJiGe][row][@"lyric"];

}

下面是運行時的圖片:

源碼有好幾個文件,所以我打包了有興趣的可以下載一下(這個也是可以快進快退的進度條和歌曲還有歌詞全部同步,左滑顯示歌詞,上下滑動歌詞歌曲會同步,進度條也會同步,同樣的左右滑動進度條歌的進度和歌詞的進度也會改變):

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • *7月8日上午 N:Block :跟一個函數(shù)塊差不多,會對里面所有的內(nèi)容的引用計數(shù)+1,想要解決就用__block...
    炙冰閱讀 2,738評論 1 14
  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發(fā)出絢麗的界面效果,一方面得益于成功系統(tǒng)的設(shè)計,另一方面得益...
    韓七夏閱讀 2,981評論 2 10
  • { 11、核心動畫 需要簽協(xié)議,但是系統(tǒng)幫簽好 一、CABasicAnimation 1、創(chuàng)建基礎(chǔ)動畫對象 CAB...
    CYC666閱讀 1,704評論 2 4
  • 本周六趙雷要在歌手的舞臺上再次唱起他的原創(chuàng)作品《理想》。在上一期歌手結(jié)束后,不管是朋友圈還是其他平臺,都被一首...
    涼城未涼閱讀 811評論 0 1
  • 有一些人,他們會默默地等你歸來 是擔心你覺得孤單 有一些人,他們會在黑暗中為你留一盞燈 是擔心你會受到驚嚇 有些人...
    依舊花落知多少閱讀 227評論 3 1

友情鏈接更多精彩內(nèi)容