十五 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