实现弹幕效果的简单方法

昨天出去玩了一天，没有写博客，总结一下之前所学的东西。今天一下午，就静下心来写几篇，首先来看看类似喜马拉雅和电影中的弹幕效果是如何实现的。先看看效果图。代码下载路径：https://github.com/ZhengYaWei1992/ZWBulletEffect

弹幕效果图
先简单说明下，后面的背景图片就是用来简单模拟一下定影的播放界面，UISwitch可以控制弹幕的开关。视图的层次结构是这样的：最顶层是一个UIImageView，imageView上防止了一个UIView和一个UISwitch。这个UIView的背景颜色为透明色，UIView上的弹幕效果都是基于一些数据模型，然后将这些数据模型通过Quartz 2D绘制成不同的image，在UIView上显示。之所以会动画滚动，是通过定时器完成的。
总的思路就是上面这样的，整体实现起来不是很难，重点是在于对上面的UIView的封装，这里我创建了一个继承与UIView的DanMuView，接下来主要分析DanMuView这个类的代码。源代码链接见文章上方。
首先创建一个定时器,调用系统方法setNeedsDisplay，调用系统方法就会调用UIVIew的drawRect:方法。在drawRect当法中通过调节图片x的坐标值，便可实现图片在DanMuView上不断的向左移动。

- (void)addTimer{
    if (self.link) {
        return;
    }
    //定时器直接调用系统方法  setNeedsDisplay会调用drawRect方法
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
    [link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
    self.link = link;
}

• (void)addImage:(ZWImage *)image这个方法是对外提供的方法，外部一旦调用这个方法在UIView上绘制一张图片，就会开启定时器，调用setNeedsDisplay方法，进而调用UIVIew的drawRect:方法。要想实现连续的弹幕效果，外部可以通过创建定时器的方式，连续多次调用这个方法即可。另外还要对ZWImage这个；类稍作说明一下，ZWImage是继承于UIImage的一个类，只是在UIImage的基础上额外扩展了两个属性x和y，主要是为了调节image在DanMuView上绘制的坐标位置。

  - (void)addImage:(ZWImage *)image{
    [self.images addObject:image];
     //添加图片的时候再开启定时器，而不是初始化就开启定时器，因为可能刚进入的时候并没有弹幕，所以不用开启定时器，但是定时器也不能开多，要用赖加载判断
    [self addTimer];
    [self setNeedsDisplay];
}

接下来看一看drawRect这个关键方法，属性images是图片数组，属性deleteImages是将要删除的图片数组，因为弹幕一旦离开了屏幕就要把绘制的图片从内存中释放，不能让其一直在内存中保存着。但是OC的语法规定，同一个数组中，不能在遍历数组的同时，删除数组中的元素，否则会崩溃。所以这里我们借助一个中间属性数组deleteImages完成删除绘制出来的image。

 - (void)drawRect:(CGRect)rect {
    
    for (ZWImage *image in self.images) {
         image.x -= 2.5;
         [image drawAtPoint:CGPointMake(image.x, image.y)];
        //判断图片是否已经超出屏幕,如果超出则移除
        if (image.x + image.size.width < 0) {
            //注意：OC语法规定，不能在遍历数组的时候，删除数组中的元素，否则会崩溃.这里的数组是指同一个数组
            //[self.images removeObject:image];
            [self.deleteImages addObject:image];
        }
    }
    //遍历deleteImages数组
    for (ZWImage *image in self.deleteImages) {
        //添加过图片后要删除，不能无限制的增加内存
        [self.images removeObject:image];
    }
    //删除deleteImages中的图片
    [self.deleteImages removeAllObjects];
}

以上说了这么多但是貌似还没有看到image在哪里，如何根据一个数据模型绘制一张图片。请看下面的代码，代码中含有步骤注释。这个方法也是对外提供的。说明：DanMU这是一个数据模型，里面包含头像、评论内容等数据信息。

   -(ZWImage *)imageViewDanMU:(DanMU *)danMu{
    //0.计算生成image的大小
    //字体大小
    UIFont *font = [UIFont systemFontOfSize:13];
    //间距
    CGFloat marginX = 5;
    //头像的尺寸
    CGFloat iconH = 30;
    CGFloat iconW = iconH;
    //用户名占据的大小
    CGSize userNameSize = [danMu.username boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
    CGFloat nameWidth = userNameSize.width;
    CGFloat nameHeight = userNameSize.height;
    //文本内容占据的大小
     CGSize textSize = [danMu.text boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
    CGFloat textWidth = textSize.width;
    CGFloat textHeight = textSize.height;
    
    //内容表情图片的尺寸
    CGFloat emotionW = 25;
    CGFloat emotionH = emotionW;
    //计算一张image的大小
    CGFloat contentH = 30;
    CGFloat contentW =marginX + iconW + marginX + userNameSize.width + marginX + textSize.width + danMu.emotions.count * emotionW;
   
    // 1.开启位图上下文  画板大小  是否透明
    CGSize contentSize = CGSizeMake(contentW,contentH);
 UIGraphicsBeginImageContextWithOptions(contentSize, NO, 0.0);
    //2.获取上下文
    CGContextRef ctx =UIGraphicsGetCurrentContext();
    // ====保存位图上下文到栈中====
    CGContextSaveGState(ctx);
 //================================================
    //3.1、绘制圆形的头像
    CGRect iconFrame = CGRectMake(0, 0, iconW, iconH);
    CGContextAddEllipseInRect(ctx, iconFrame);
    CGContextClip(ctx);
    UIImage *icon = danMu.type? [UIImage imageNamed:@"me"] :[UIImage imageNamed:@"your"];
    [icon drawInRect:iconFrame];
    //===将位图上下文出栈====   保存和拉出问题上下文出站，主要是防止之前的设置对之后的绘制不影响，如上面的CGContextClip(ctx);
    CGContextRestoreGState(ctx);  //================================================
    //3.2、绘制文本背景颜色、文本背景颜色、文本（用户名和评论内容）
    //绘制文本背景颜色
    if (danMu.type == DanMuTypeMe) {
        // 本人发的为红色
        [[UIColor colorWithRed:248 / 255.0 green:100 / 255.0 blue:66/255.0 alpha:0.9] set];
    } else {
        // 其他人发的为白色
        [[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.9] set];
    }
    //绘制文本背景
    CGFloat textBackgroundX = iconW + marginX;
    CGFloat textBackgroundY = 0;
    CGFloat textBackgroundW = contentW - textBackgroundX;
    CGFloat textBackgroundH = contentH;
    [[UIBezierPath bezierPathWithRoundedRect:CGRectMake(textBackgroundX, textBackgroundY,textBackgroundW , textBackgroundH) cornerRadius:20] fill];
    // 用户名
    CGFloat nameX = textBackgroundX + marginX;
    //注意这里要让文字居中显示
    CGFloat nameY = (contentH - textHeight) * 0.5;
    CGRect nameRect = CGRectMake(nameX, nameY, nameWidth, nameHeight);
    [danMu.username drawInRect:nameRect withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:(danMu.type == DanMuTypeMe) ? [UIColor blackColor]:[UIColor orangeColor]}];
    //内容
    CGFloat textX = nameX + nameWidth + marginX;
    CGFloat textY = (contentH - textHeight) * 0.5;
    CGRect textRect = CGRectMake(textX, textY, textWidth, textHeight);
    [danMu.text drawInRect:textRect withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:(danMu.type == DanMuTypeMe) ? [UIColor whiteColor]:[UIColor blackColor]}];
    //3.3、绘制表情图片
    __block CGFloat emotionX = textX + textWidth;
    CGFloat emotionY = (contentH - emotionH) * 0.5 ;
    [danMu.emotions enumerateObjectsUsingBlock:^(NSString * _Nonnull emotionName, NSUInteger idx, BOOL * _Nonnull stop) {
        // 加载表情图片
        UIImage *emotion = [UIImage imageNamed:emotionName];
        // 绘制表情图片
        [emotion drawInRect:CGRectMake(emotionX, emotionY, emotionW, emotionH)];
        // 修改emotionX
        emotionX += emotionW;
    }];
    //4.获取绘制好的图片
   UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
   //5.关闭上下文
    UIGraphicsEndImageContext();
   return [[ZWImage alloc]initWithCGImage:image.CGImage scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];
}

DanMuView类中的代码就只是这些，接下来看看外部如何调用。外部要想绘制多张图片，就要调用定时器的方法按照固定的时间间隔，不断的调用DanMuView中的方法。下面的onTimer是定时器NSTimer按照固定的时间间隔调用的方法。在绘制的图片类型是ZWImage，每个图片都设置有初始的x和y值，x的初始值和屏幕的宽度相等，y值是一个随机值，但是这个随机值我稍微做了一些调节让它只能在DanMuView的范围内显示。就简单说这么多，具体还是要看源码，才能完全的理解。源码链接见上方。

-(void)onTimer{
    //获取一个随机模型
    NSInteger index = arc4random_uniform((u_int32_t)self.danMus.count);//0-----self.danMus.count-1
    DanMU *danMU = self.danMus[index];
    //根据模型生成一张图片
    ZWImage *image = [self.danMuView imageViewDanMU:danMU];
    image.x = self.view.frame.size.width;
    //这个高度不能超过弹幕的高度
    image.y = arc4random_uniform(self.danMuView.frame.size.height - image.size.height);
    [self.danMuView addImage:image];
}