ios彈幕高效加載實(shí)現(xiàn)方式實(shí)例代碼
看直播的童鞋們應(yīng)該會(huì)經(jīng)??吹綕M屏幕的滾動(dòng)彈幕,看到密密麻麻的彈幕第一印象就是怎么樣高效加載來避免卡頓,彈幕組成部分包含用戶頭像、用戶昵稱、彈幕的內(nèi)容、表情等,本文介紹的實(shí)現(xiàn)原理就是把這幾部分繪制成一張圖片,然后通過定時(shí)器移動(dòng)彈幕圖片,當(dāng)圖片不在屏幕范圍內(nèi)即銷毀。
先看下效果


下面我會(huì)詳細(xì)介紹下實(shí)現(xiàn)原理
1 .獲取彈幕數(shù)據(jù)來源,因?yàn)槲沂悄M生成彈幕,彈幕的數(shù)據(jù)存放在工程里的plist文件中

emotions存放這條彈幕的表情,type表示是否是自己發(fā)的,text表示彈幕內(nèi)容,userName表示用戶昵稱。取出plist文件的數(shù)據(jù)并轉(zhuǎn)換成model。
#pragma mark - 獲取數(shù)據(jù)源
- (void)loadData{
// 獲取plist全路徑
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"barrage.plist" ofType:nil];
// 從指定的路徑中加載數(shù)據(jù)
NSArray *array = [NSArray arrayWithContentsOfFile:filePath];
// 遍歷數(shù)組
for (NSDictionary *dict in array) {
// 字典轉(zhuǎn)模型
BAModle *barrageM = [BAModle barrageWithDict:dict];
[self.danMus addObject:barrageM];
}
}
2 .根據(jù)模型生成彈幕圖片,通過點(diǎn)擊屏幕生成模型,根據(jù)模型繪制圖片。
#pragma mark - 觸摸屏幕響應(yīng)事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
// 獲得一個(gè)隨機(jī)整數(shù)
NSInteger index = arc4random_uniform((u_int32_t)self.danMus.count);
// 獲得一個(gè)隨機(jī)模型
BAModle *danMu = self.danMus[index];
// 根據(jù)模型生成圖片
BAImage *image = [self.danMuview imageWithBarrage:danMu];
// 調(diào)整彈幕加載區(qū)域
image.x = self.view.bounds.size.width;
image.y = arc4random_uniform(self.danMuview.bounds.size.height - image.size.height);
// 把圖片加到彈幕view上
[self.danMuview addImage:image];
}
下面是具體繪制彈幕圖片過程,我先簡(jiǎn)單介紹下,首先在繪圖之前要確定上下文的尺寸,相當(dāng)于畫板的大小,畫板的長(zhǎng) = 頭像的長(zhǎng) + 昵稱的長(zhǎng) + 內(nèi)容的長(zhǎng) + 表情的長(zhǎng) * 表情個(gè)數(shù) + 間距。然后就是分別繪制背景圖片,用戶昵稱,內(nèi)容和表情,最后返回一張圖片。
此處有兩點(diǎn)需要注意:
1.由于頭像是矩形,想顯示成圓形,要先畫一個(gè)圓,并設(shè)置超出圓形的部分要裁剪,再繪制頭像。
2.由于上面設(shè)置超出圓形的部分要裁剪,那即將要繪制背景豈不是要被裁剪,所以在繪制圓形區(qū)域上一句執(zhí)行了CGContextSaveGState(ctx)表示復(fù)制了一份畫板(上下文)存到棧里,在繪制背景圖片之前執(zhí)行CGContextRestoreGState(ctx),表示用之前保存的畫板替換當(dāng)前的,因?yàn)橹氨4娴漠嫲鍥]有設(shè)置超出圓形區(qū)域要裁剪的需求,當(dāng)然替換當(dāng)前的畫板,會(huì)把當(dāng)前畫板上的繪圖也copy過去。
#pragma mark - 繪制彈幕圖片
- (BAImage *)imageWithBarrage:(BAModle *)danMu{
// 開啟繪圖上下文
//
UIFont *font = [UIFont systemFontOfSize:13];
// 頭像
CGFloat iconH = 30;
CGFloat iconW = iconH;
// 間距
CGFloat marginX = 5;
// 表情的尺寸
CGFloat emotionW = 25;
CGFloat emotionH = emotionW;
// 計(jì)算用戶名占據(jù)的區(qū)域
CGSize nameSize = [danMu.userName boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
// 計(jì)算內(nèi)容占據(jù)的區(qū)域
CGSize textSize = [danMu.text boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
// 位圖上下文的尺寸
CGFloat contentH = iconH;
CGFloat contentW = iconW + 4 * marginX + nameSize.width + textSize.width + danMu.emotions.count * emotionH;
CGSize contextSize = CGSizeMake(contentW, contentH);
UIGraphicsBeginImageContextWithOptions(contextSize, NO, 0.0);
// 獲得位圖上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 將上下文保存到棧中
CGContextSaveGState(ctx);
// 1.繪制圓形區(qū)域
CGRect iconFrame = CGRectMake(0, 0, iconW, iconH);
// 繪制頭像圓形
CGContextAddEllipseInRect(ctx, iconFrame);
// 超出圓形的要裁剪
CGContextClip(ctx);
// 2.繪制頭像
UIImage *icon = danMu.type ? [UIImage imageNamed:@"headImage_1"]:[UIImage imageNamed:@"headImage_2"];
[icon drawInRect:iconFrame];
// 將上下文出棧替換當(dāng)前上下文
CGContextRestoreGState(ctx);
// 3.繪制背景圖片
CGFloat bgX = iconW + marginX;
CGFloat bgY = 0;
CGFloat bgW = contentW - bgX;
CGFloat bgH = contentH;
danMu.type ? [[UIColor orangeColor] set]:[[UIColor whiteColor] set];
[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(bgX, bgY, bgW, bgH) cornerRadius:20.0] fill];
// 4.繪制用戶名
CGFloat nameX = bgX + marginX;
CGFloat nameY = (contentH - nameSize.height) * 0.5;
[danMu.userName drawAtPoint:CGPointMake(nameX, nameY) withAttributes:@{NSAttachmentAttributeName:font,NSForegroundColorAttributeName:danMu.type == NO ? [UIColor orangeColor]:[UIColor blackColor]}];
// 5.繪制內(nèi)容
CGFloat textX = nameX + nameSize.width + marginX;
CGFloat textY = nameY;
[danMu.text drawAtPoint:CGPointMake(textX, textY) withAttributes:@{NSAttachmentAttributeName:font,NSForegroundColorAttributeName:danMu.type == NO ? [UIColor blackColor]:[UIColor whiteColor]}];
// 6.繪制表情
__block CGFloat emotionX = textX + textSize.width;
CGFloat emotionY = (contentH - emotionH) * 0.5;
[danMu.emotions enumerateObjectsUsingBlock:^(NSString *emotionName, NSUInteger idx, BOOL * _Nonnull stop) {
// 加載表情圖片
UIImage *emotion = [UIImage imageNamed:emotionName];
[emotion drawInRect:CGRectMake(emotionX, emotionY, emotionW, emotionH)];
// 修改emotionX
emotionX += emotionW;
}];
// 從位圖上下文中獲得繪制好的圖片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
return [[BAImage alloc] initWithCGImage:image.CGImage scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];
}
3 .開啟繪圖定時(shí)器,回調(diào)方法是setNeedsDisplay,這樣就會(huì)執(zhí)行- (void)drawRect:(CGRect)rect每次修改image.x(由于UIImage沒有x、y屬性,所以寫了個(gè)類拓展BAImage),滾動(dòng)不在屏幕范圍內(nèi)的會(huì)銷毀
#pragma mark - 添加定時(shí)器
- (void)addTimer{
if (self.link) {
return;
}
// 每秒執(zhí)行60次回調(diào)
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
// 將定時(shí)器添加到runLoop
[link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
self.link = link;
}
#pragma mark - 繪制移動(dòng)
- (void)drawRect:(CGRect)rect{
for (BAImage *image in self.imageArray) {
image.x -= 3;
// 繪制圖片
[image drawAtPoint:CGPointMake(image.x, image.y)];
// 判斷圖片是否超出屏幕
if (image.x + image.size.width < 0) {
[self.deleteImageArray addObject:image];
}
}
// 移除超過屏幕的彈幕
for (BAImage *image in self.deleteImageArray) {
[self.imageArray removeObject:image];
}
[self.deleteImageArray removeAllObjects];
}
最后附上代碼地址:barrageDemo_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS App項(xiàng)目中引入SQLite數(shù)據(jù)庫的教程
SQLite是一個(gè)極輕的嵌入式數(shù)據(jù)庫,在應(yīng)用程序中捆綁使用可以更方便地幫助操控關(guān)系型數(shù)據(jù),這里我們就來看一下iOS App項(xiàng)目中引入SQLite數(shù)據(jù)庫的教程2016-06-06
IOS開發(fā)之適配iOS10及Xcode8的注意點(diǎn)
這篇文章主要介紹了IOS開發(fā)之適配iOS10及Xcode8的注意點(diǎn),本文給大家介紹了可能出現(xiàn)的問題及相應(yīng)的解決方法,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看2016-10-10
Swift Self詳解及簡(jiǎn)單實(shí)例代碼
這篇文章主要介紹了Swift Self詳解及簡(jiǎn)單實(shí)例代碼的相關(guān)資料,這里對(duì)self 進(jìn)行了詳細(xì)介紹并附實(shí)例代碼,需要的朋友可以參考下2016-12-12
iOS開發(fā)項(xiàng)目- 基于WebSocket的聊天通訊(2)
這篇文章主要介紹了iOS開發(fā)項(xiàng)目- 基于WebSocket的聊天通訊,可以實(shí)現(xiàn)錄音和音樂播放,有需要的可以了解一下。2016-11-11
CocoaPods 出現(xiàn)LoadError - cannot load such file -- nanaimo錯(cuò)誤解決
這篇文章主要介紹了CocoaPods 出現(xiàn)LoadError - cannot load such file -- nanaimo錯(cuò)誤解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04
iOS 自定義狀態(tài)欄和導(dǎo)航欄詳細(xì)介紹
這篇文章主要介紹了iOS 自定義狀態(tài)欄和導(dǎo)航欄詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-11-11

