昨天出去玩了一天，没有写博客，总结一下之前所学的东西。今天一下午，就静下心来写几篇，首先来看看类似喜马拉雅和电影中的弹幕效果是如何实现的。先看看效果图。代码下载路径：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];
}
网友评论