看直播的童鞋們應該會經常看到滿屏幕的滾動彈幕，看到密密麻麻的彈幕第一印象就是怎么樣高效加載來避免卡頓，彈幕組成部分包含用戶頭像、用戶昵稱、彈幕的內容、表情等，本文介紹的實現原理就是把這幾部分繪制成一張圖片，然后通過定時器移動彈幕圖片，當圖片不在屏幕范圍內即銷毀。
先看下效果
下面我會詳細介紹下實現原理
1 .獲取彈幕數據來源，因為我是模擬生成彈幕，彈幕的數據存放在工程里的plist文件中
emotions存放這條彈幕的表情，type表示是否是自己發的，text表示彈幕內容，userName表示用戶昵稱。取出plist文件的數據并轉換成model。
#pragma mark - 獲取數據源- (void)loadData{ // 獲取plist全路徑 NSString *filePath = [[NSBundle mainBundle] pathForResource:@"barrage.plist" ofType:nil]; // 從指定的路徑中加載數據 NSArray *array = [NSArray arrayWithContentsOfFile:filePath]; // 遍歷數組 for (NSDictionary *dict in array) { // 字典轉模型 BAModle *barrageM = [BAModle barrageWithDict:dict]; [self.danMus addObject:barrageM]; }}2 .根據模型生成彈幕圖片，通過點擊屏幕生成模型，根據模型繪制圖片。
#pragma mark - 觸摸屏幕響應事件- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ // 獲得一個隨機整數 NSInteger index = arc4random_uniform((u_int32_t)self.danMus.count); // 獲得一個隨機模型 BAModle *danMu = self.danMus[index]; // 根據模型生成圖片 BAImage *image = [self.danMuview imageWithBarrage:danMu]; // 調整彈幕加載區域 image.x = self.view.bounds.size.width; image.y = arc4random_uniform(self.danMuview.bounds.size.height - image.size.height); // 把圖片加到彈幕view上 [self.danMuview addImage:image]; }下面是具體繪制彈幕圖片過程，我先簡單介紹下，首先在繪圖之前要確定上下文的尺寸，相當于畫板的大小，畫板的長 = 頭像的長 + 昵稱的長 + 內容的長 + 表情的長 * 表情個數 + 間距。然后就是分別繪制背景圖片，用戶昵稱，內容和表情，最后返回一張圖片。
此處有兩點需要注意：
1.由于頭像是矩形，想顯示成圓形，要先畫一個圓，并設置超出圓形的部分要裁剪，再繪制頭像。
2.由于上面設置超出圓形的部分要裁剪，那即將要繪制背景豈不是要被裁剪，所以在繪制圓形區域上一句執行了CGContextSaveGState(ctx)表示復制了一份畫板（上下文）存到棧里，在繪制背景圖片之前執行CGContextRestoreGState(ctx)，表示用之前保存的畫板替換當前的，因為之前保存的畫板沒有設置超出圓形區域要裁剪的需求，當然替換當前的畫板，會把當前畫板上的繪圖也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; // 計算用戶名占據的區域 CGSize nameSize = [danMu.userName boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size; // 計算內容占據的區域 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.繪制圓形區域 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]; // 將上下文出棧替換當前上下文 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.繪制內容 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 .開啟繪圖定時器，回調方法是setNeedsDisplay，這樣就會執行- (void)drawRect:(CGRect)rect每次修改image.x(由于UIImage沒有x、y屬性，所以寫了個類拓展BAImage)，滾動不在屏幕范圍內的會銷毀
#pragma mark - 添加定時器- (void)addTimer{ if (self.link) { return; } // 每秒執行60次回調 CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)]; // 將定時器添加到runLoop [link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes]; self.link = link;}#pragma mark - 繪制移動- (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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
