看直播的童鞋們應(yīng)該會經(jīng)常看到滿屏幕的滾動彈幕混坞，看到密密麻麻的彈幕第一印象就是怎么樣高效加載來避免卡頓，彈幕組成部分包含用戶頭像钢坦、用戶昵稱究孕、彈幕的內(nèi)容、表情等爹凹，本文介紹的實現(xiàn)原理就是把這幾部分繪制成一張圖片厨诸，然后通過定時器移動彈幕圖片，當圖片不在屏幕范圍內(nèi)即銷毀禾酱。

先看下效果

屏幕快照 2017-03-06 下午5.59.13.png

彈幕效果.gif

下面我會詳細介紹下實現(xiàn)原理

• 1 .獲取彈幕數(shù)據(jù)來源微酬，因為我是模擬生成彈幕，彈幕的數(shù)據(jù)存放在工程里的plist文件中

barrage.plist

#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ù)模型生成彈幕圖片，通過點擊屏幕生成模型闲坎，根據(jù)模型繪制圖片疫粥。

#pragma mark - 觸摸屏幕響應(yīng)事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    // 獲得一個隨機整數(shù)
    NSInteger index = arc4random_uniform((u_int32_t)self.danMus.count);
    // 獲得一個隨機模型
    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]; 
}

下面是具體繪制彈幕圖片過程，我先簡單介紹下腰懂，首先在繪圖之前要確定上下文的尺寸梗逮，相當于畫板的大小，畫板的長 = 頭像的長 + 昵稱的長 + 內(nèi)容的長 + 表情的長 * 表情個數(shù) + 間距绣溜。然后就是分別繪制背景圖片慷彤，用戶昵稱，內(nèi)容和表情怖喻，最后返回一張圖片底哗。
此處有兩點需要注意：
1.由于頭像是矩形，想顯示成圓形锚沸，要先畫一個圓跋选，并設(shè)置超出圓形的部分要裁剪，再繪制頭像哗蜈。
2.由于上面設(shè)置超出圓形的部分要裁剪前标，那即將要繪制背景豈不是要被裁剪坠韩，所以在繪制圓形區(qū)域上一句執(zhí)行了CGContextSaveGState(ctx)表示復(fù)制了一份畫板（上下文）存到棧里，在繪制背景圖片之前執(zhí)行CGContextRestoreGState(ctx)炼列，表示用之前保存的畫板替換當前的只搁，因為之前保存的畫板沒有設(shè)置超出圓形區(qū)域要裁剪的需求，當然替換當前的畫板俭尖，會把當前畫板上的繪圖也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ù)的區(qū)域
    CGSize nameSize = [danMu.userName boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
    // 計算內(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];
    // 將上下文出棧替換當前上下文
    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 .開啟繪圖定時器，回調(diào)方法是setNeedsDisplay稽犁，這樣就會執(zhí)行- (void)drawRect:(CGRect)rect每次修改image.x(由于UIImage沒有x焰望、y屬性，所以寫了個類拓展BAImage)已亥，滾動不在屏幕范圍內(nèi)的會銷毀

#pragma mark - 添加定時器
- (void)addTimer{
    if (self.link) {
        return;
    }
    // 每秒執(zhí)行60次回調(diào)
    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];
}

最后附上gitHub地址

謝謝各位柿估，歡迎指教！