十五 iOS之 酷炫弹幕

介绍下弹幕的制作，原理是利用定时器驱动不断重绘达到滚动弹幕的效果。这次的demo比较简单，之后还会更新博文，介绍更复杂更完善的demo，请持续关注。

示例图

---

主要功能：点击屏幕就会从右侧飘出一条弹幕（目前是一张图片）

我用的storyboard，先拖入一个UIImageView，设置一张图片，这个就是背景了。然后再拖入一个UIView，设置为透明色，尺寸和UIImageView相等，盖在UIImageView上，这个就是DGDanMuView。如下图

自定义一个UIImage,命名为DGImage，写入两个属性就行

• DGImage.h

#import <UIKit/UIKit.h>@interface DGImage : UIImage/**图片初始位置x*/@property(nonatomic,assign)CGFloat x;/**图片初始位置y*/@property(nonatomic,assign)CGFloat y;@end

新建一个UIVIew –DGDanMuView

• DGDanMuView.h

#import <UIKit/UIKit.h>@class DGImage;@interface DGDanMuView : UIView-(void)addImages:(DGImage*)image;@end

• DGDanMuView.m

#import "DGDanMuView.h"#import "DGImage.h"@interface DGDanMuView()/** 图片数组 */@property(nonatomic,strong)NSMutableArray * imageArr;/**定时器*/@property(nonatomic,strong)CADisplayLink * link;/**即将删除的图片数组*/@property(nonatomic,strong)NSMutableArray * deleImageArr;@end@implementation DGDanMuView-(void)addImages:(DGImage*)image{    //将图片加入的数组中    [self.imageArr addObject:image];    [self addTimer];}- (void)drawRect:(CGRect)rect {   //当图片数组中没有图片是就销毁定时器if (self.imageArr.count == 0) {        [self.link invalidate];            self.link = nil;        return;}    NSLog(@"%s",__func__);     //从图片数组中不断读取图片    for (DGImage * image in self.imageArr) {        //让图片的x值不断变小，在水平方向就会向左飘去        image.x -= 3;        //绘制图片，如果定时器不停止这里就会不断绘制         [image drawAtPoint:CGPointMake(image.x, image.y)];        //当图片的最右侧飘离屏幕时，就把这张图片添加到即将删除的数组中        if (image.x + image.size.width < 0) {            [self.deleImageArr addObject:image];        }}    //因为不能一边遍历数组一边从这个数组中删除元素，所以只能从deleImageArr中遍历出这个图片然后从imageArr中删除    for (DGImage * image in self.deleImageArr) {        [self.imageArr removeObject:image];    }    [self.deleImageArr removeAllObjects];}#pragma mark - 添加定时器-(void)addTimer{    if (self.link) return;    CADisplayLink * link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes ];    self.link = link;}#pragma mark - 懒加载图片数组-(NSMutableArray*)imageArr{    if (_imageArr == nil) {        _imageArr = [NSMutableArray array];    }    return _imageArr;}-(NSMutableArray*)deleImageArr{    if (_deleImageArr == nil) {        _deleImageArr = [NSMutableArray array];    }    return _deleImageArr;}@end

在ViewController中调用

• ViewController.m

#import "ViewController.h"#import "DGDanMuView.h"#import "DGImage.h"@interface ViewController ()@property (weak, nonatomic) IBOutlet DGDanMuView *danMuView;@end@implementation ViewController//点击一下屏幕将飘出一条弹幕-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{     NSString * filePath = [[NSBundle mainBundle]pathForResource:@"弹幕图片01.png" ofType:nil];    DGImage * image = [[DGImage alloc]initWithContentsOfFile:filePath];    //设置图片从屏幕最右侧飘出    image.x = self.view.bounds.size.width;    //设置图片飘出时不会出现在DGDanMuView之外    image.y = arc4random_uniform(250 - image.size.height);    //将这张图片加入到DGDanMuView中    [self.danMuView addImages:image];}@end

github demo: BarrageDemo