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

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

直接上原理:

第一種:

原理就是創(chuàng)建一個UILabel抵代,設置一下UILabel的lineBreakMode屬性為NSLineBreakByClipping(這樣的話就是的內容過多的話就會不顯示腾节,所以UILabel的寬度設置成0,就會不顯示內容荤牍,然后用定時器不斷更改寬度案腺,內容也就會不斷地顯示出來,覆蓋掉原本的內容康吵,字體顏色要設成顏色不一樣的劈榨,默認都是黑色,所以要改個其他的顏色晦嵌,不然的話效果就看不出來了)同辣,位置大小和內容文本的位置一樣拷姿,高度也一樣,就會給人一種卡拉OK的效果旱函。

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

第二種:

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

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

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

因為采用的是UIPickerView脆诉,所以顯示歌詞需要判斷一下,下面的這個方法不只是每顯示一行調用一次贷币,所以要判斷一下

//根據(jù)字體大小來設置高度或寬度

-(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ù)字體調整frame的大小

CGRectmyRect;

myRect=[selfboundingRectWithInitSize: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;

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

}

下面是運行時的圖片:

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末策州,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宫仗,更是在濱河造成了極大的恐慌够挂,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件锰什,死亡現(xiàn)場離奇詭異下硕,居然都是意外死亡丁逝,警方通過查閱死者的電腦和手機汁胆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來霜幼,“玉大人嫩码,你說我怎么就攤上這事∽锛龋” “怎么了铸题?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長琢感。 經常有香客問我丢间,道長,這世上最難降的妖魔是什么驹针? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任烘挫,我火速辦了婚禮,結果婚禮上柬甥,老公的妹妹穿的比我還像新娘饮六。我一直安慰自己,他們只是感情好苛蒲,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布卤橄。 她就那樣靜靜地躺著,像睡著了一般臂外。 火紅的嫁衣襯著肌膚如雪窟扑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天漏健,我揣著相機與錄音嚎货,去河邊找鬼。 笑死漾肮,一個胖子當著我的面吹牛厂抖,可吹牛的內容都是我干的。 我是一名探鬼主播克懊,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼忱辅,長吁一口氣:“原來是場噩夢啊……” “哼七蜘!你這毒婦竟也來了?” 一聲冷哼從身側響起墙懂,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤橡卤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后损搬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碧库,經...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年巧勤,在試婚紗的時候發(fā)現(xiàn)自己被綠了嵌灰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡颅悉,死狀恐怖沽瞭,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情剩瓶,我是刑警寧澤驹溃,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站延曙,受9級特大地震影響豌鹤,放射性物質發(fā)生泄漏。R本人自食惡果不足惜枝缔,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一布疙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧魂仍,春花似錦拐辽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赊舶,卻和暖如春睁搭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笼平。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工园骆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人寓调。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓锌唾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子晌涕,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內容

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