iOS 弹幕制作

离职的最后一天,在公司学习下弹幕的制作.基于OC.

主要思路:

1.首先建一个弹幕类BulletView,基于UIView,然后在该类上写个UIlabel,用于放置弹幕文字,然后前端放置一个UIImageView,放置用户头像.该类主要绘制UI和动画.

2.其次建立一个弹幕的管理类BulletManager,主要管理弹幕数据源,随机分配弹幕轨迹,根据不同状态(start,enter,end)做不同处理,该类主要负责逻辑部分.

其中,在弹幕类BulletView中写一个回调,负责回调当前弹幕的状态(start,enter,end)给管理类BulletManager;在管理类BulletManage写一个回调,负责回调弹幕视图给ViewController.

弹幕类:

BulletView.h

 //
 //  BulletView.h
 //  danMu
 //
 //  Created by Shaoting Zhou on 2017/9/11.
 //  Copyright © 2017年 Shaoting Zhou. All rights reserved.
 //

 #import <UIKit/UIKit.h>
 typedef NS_ENUM(NSInteger,MoveStatus){
     Start,
     Enter,
     End,
 };
 @interface BulletView : UIView
 @property (nonatomic,assign) int trajectory;  //弹幕弹道
 @property (nonatomic,copy) void(^ moveStatusBlock)(MoveStatus status);  //弹幕状态回调 开始  运行中 结束

 -(instancetype)initWithCommentDic:(NSDictionary *)dic;   //初始化弹幕

 -(void)startAnimation;  //开始动画
 -(void)stopAnimation; //结束动画

 @end

BulletView.m

 //
 //  BulletView.m
 //  danMu
 //
 //  Created by Shaoting Zhou on 2017/9/11.
 //  Copyright © 2017年 Shaoting Zhou. All rights reserved.
 //

 #import "BulletView.h"

 #define padding 10
 #define imgHeight 30
 @interface BulletView()
 @property (nonatomic,strong) UILabel * lbComment;
 @property (nonatomic,strong) UIImageView * imgView;

 @end

 @implementation BulletView

 //MARK: 初始化弹幕
 -(instancetype)initWithCommentDic:(NSDictionary *)dic{
     if(self = [super init]){
         self.layer.cornerRadius = /;

         CGFloat colorR = arc4random()%;
         CGFloat colorG = arc4random()%;
         CGFloat colorB = arc4random()%;
         self.backgroundColor = [UIColor colorWithRed:colorR/ green:colorG/ blue:colorB/ alpha:1.0];

         //计算弹幕的实际宽度
         NSDictionary *attr = @{NSFontAttributeName:[UIFont systemFontOfSize:]};
         NSString * comment = dic[@"danmu"];
         CGFloat width = [comment sizeWithAttributes:attr].width;
         self.bounds = CGRectMake(, , width +  * padding + imgHeight , );
         self.lbComment.text = comment;
         self.lbComment.frame = CGRectMake(padding + imgHeight, , width, );

         //头像
         self.imgView.frame = CGRectMake(-padding, -padding, imgHeight + padding,  imgHeight + padding);
         self.imgView.layer.cornerRadius =  (imgHeight + padding)/;
         NSURL * url = [NSURL URLWithString:dic[@"userPhoto"]];
         self.imgView.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];;

 //        NSLog(@"%@",comment);
     }
     return self;
 }

 -(UILabel *)lbComment{
     if(!_lbComment){
         self.lbComment = [[UILabel alloc]initWithFrame:CGRectZero];
         self.lbComment.font = [UIFont systemFontOfSize:];
         self.lbComment.textColor = [UIColor whiteColor];
         self.lbComment.textAlignment =  NSTextAlignmentCenter;
         [self addSubview:self.lbComment];

     }
     return _lbComment;
 }

 -(UIImageView *)imgView{
     if(!_imgView){
         self.imgView = [UIImageView new];
         self.imgView.clipsToBounds = YES;
         self.imgView.contentMode = UIViewContentModeScaleAspectFill;
         [self addSubview:self.imgView];
     }
     return _imgView;
 }

 //MARK:开始动画
 -(void)startAnimation{
     CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
     CGFloat duration = 4.0f;
     CGFloat wholeWidth = screenWidth + CGRectGetWidth(self.bounds);

 //    弹幕开始
     if(self.moveStatusBlock){
         self.moveStatusBlock(Start);
     }

     CGFloat speed = wholeWidth/duration;   // v =  s/t
     CGFloat enterDuration = CGRectGetWidth(self.bounds)/speed;  //完全进入屏幕所需时间
     [self performSelector:@selector(enterScreen) withObject:nil afterDelay:enterDuration];

     //v = s/t   时间相同,弹幕越长,速度越快
     __block CGRect frame = self.frame;
     [UIView animateWithDuration:duration delay: options:UIViewAnimationOptionCurveLinear animations:^{
         frame.origin.x = -wholeWidth;
         self.frame = frame;
     } completion:^(BOOL finished) {
         [self removeFromSuperview] ;

 //        回调状态
         if(self.moveStatusBlock){
             self.moveStatusBlock(End);
         }

     }];

 }

 //MARK:结束动画
 -(void)stopAnimation{
     [NSObject cancelPreviousPerformRequestsWithTarget:self];
     [self.layer removeAllAnimations];
     [self removeFromSuperview];
 }

 //MARK: 弹幕完全入屏幕调用
 -(void)enterScreen{
     if(self.moveStatusBlock){
         self.moveStatusBlock(Enter);
     }
 }

 @end

BulletManager.h

 //
 //  BulletManager.h
 //  danMu
 //
 //  Created by Shaoting Zhou on 2017/9/11.
 //  Copyright © 2017年 Shaoting Zhou. All rights reserved.
 //

 #import <Foundation/Foundation.h>

 @class BulletView;
 @interface BulletManager : NSObject

 @property (nonatomic,copy) void(^generateViewBlock)(BulletView* view);

 -(void)start;
 -(void)stop;
 -(void)createBulletView:(NSDictionary *)commentDic trajectory:(int)trajectory;

 @end

BulletManager.m

 //
 //  BulletManager.m
 //  danMu
 //
 //  Created by Shaoting Zhou on 2017/9/11.
 //  Copyright © 2017年 Shaoting Zhou. All rights reserved.
 //

 #import "BulletManager.h"
 #import "BulletView.h"

 @interface BulletManager()
 @property (nonatomic,strong) NSMutableArray * datasource;   //弹幕数据源
 @property (nonatomic,strong) NSMutableArray * bulletComments;  //弹幕使用过程中的数组变量
 @property (nonatomic,strong) NSMutableArray * bulletViews;  //存放弹幕view的数组变量
 @property BOOL stopAnimation;  //动画结束标示
 @end

 @implementation BulletManager

 -(instancetype)init{
     if(self = [super init]){
         self.stopAnimation = YES;
     }
     return self;
 }

 -(void)start{
     if(!self.stopAnimation){
         return;
     }
     self.stopAnimation = NO;
     [self.bulletComments removeAllObjects];
     [self.bulletComments addObjectsFromArray:self.datasource];

     [self initBulletComment];

 }

 -(void)stop{
     if(self.stopAnimation){
         return;
     }
     self.stopAnimation = YES;

     [self.bulletViews enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
         BulletView * view = obj;
         [view stopAnimation];
         view = nil;
     }];
     [self.bulletViews removeAllObjects];
 }

 //MARK:初始化弹幕,随机分配弹幕轨迹
 -(void)initBulletComment{
     NSMutableArray *  trajectorys = [NSMutableArray arrayWithArray:@[@(),@(),@(),@()]];
     for (int i = ; i < ; i++) {
         if(self.bulletComments.count > ){
             //        通过随机数获取弹幕轨迹
             NSInteger  index = arc4random()%trajectorys.count;
             int trajectory = [[trajectorys objectAtIndex:index] intValue];
             [trajectorys removeObjectAtIndex:index];

             //    从弹幕数组中取出弹幕数据
             NSDictionary * commentDic = [self.bulletComments firstObject];
             [self.bulletComments removeObjectAtIndex:];

             [self createBulletView:commentDic trajectory:trajectory];
         }

     }

 }

 //MARK: 创建弹幕视图
 -(void)createBulletView:(NSDictionary *)commentDic trajectory:(int)trajectory {
     if(self.stopAnimation){
         return;
     }
     BulletView * bulletView = [[BulletView alloc]initWithCommentDic:commentDic];
 //    NSLog(@"%@",commentDic);
     bulletView.trajectory = trajectory;
     [self.bulletViews addObject:bulletView];

     __weak typeof (bulletView) weakView = bulletView;
     __weak typeof(self) weakSelf = self;
     bulletView.moveStatusBlock = ^(MoveStatus status){
         if(weakSelf.stopAnimation){
             return;
         }

         switch (status) {
             case Start:{
                 //                弹幕开始,将view加入到弹幕管理的变量bulletViews中
                 [weakSelf.bulletViews addObject:weakView];
                 break;
             }
             case Enter:{
                 //                弹幕完全进入屏幕,判断是否还有弹幕,有的话则在该弹幕轨迹中创建弹幕视图
                 NSDictionary * commentDic = [self nextComment];
                 if(commentDic){
                     [weakSelf createBulletView:commentDic trajectory:trajectory];  //递归即可
                 }
                 break;
             }
             case End:{
 //            弹幕飞出屏幕后,从bulletViews删除,移除资源
                 if([weakSelf.bulletViews containsObject:weakView]){
                     [weakView stopAnimation];
                     [weakSelf.bulletViews removeObject:weakView];
                 }
                 //已经木有弹幕了,循环播放
                 if(weakSelf.bulletViews.count == ){
                     self.stopAnimation = YES;
                     [weakSelf start];
                 }
                 break;
             }
             default:
                 break;
         }

     };

 //    回调view给viewControlller
     if(self.generateViewBlock){
         self.generateViewBlock(bulletView);
     }

 }

 //MARK:  取出下一条弹幕
 -(NSDictionary *)nextComment{
     NSDictionary * commentDic = [self.bulletComments firstObject];
     if(commentDic){
         [self.bulletComments removeObjectAtIndex:];
     }
     return commentDic;
 }

 -(NSMutableArray *)datasource{
     if(!_datasource){
         NSData * data = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"data" ofType:@"json"]];
         NSArray * ary = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
         self.datasource = [NSMutableArray arrayWithArray:ary];
     }
     return _datasource;
 }

 -(NSMutableArray *)bulletComments{
     if(!_bulletComments){
         self.bulletComments = [NSMutableArray array];
     }
     return _bulletComments;
 }

 -(NSMutableArray *)bulletViews{
     if(!_bulletViews){
         self.bulletViews = [NSMutableArray array];
     }
     return _bulletViews;
 }

 @end

数据源:

[
 {
   "userPhoto":"https://ws1.sinaimg.cn/large/610dc034ly1fiz4ar9pq8j20u010xtbk.jpg",
   "danmu":"城市套路深,我要回农村!!!"
 },
 {
    "userPhoto":"https://ws1.sinaimg.cn/large/610dc034ly1fis7dvesn6j20u00u0jt4.jpg",
    "danmu":"农村路更滑,人心更复杂~~"
 },
 {
 "userPhoto":"https://ws1.sinaimg.cn/large/610dc034ly1fiiiyfcjdoj20u00u0ju0.jpg",
 "danmu":""
 },
 {
 "userPhoto":"https://ws1.sinaimg.cn/large/610dc034gy1fi2okd7dtjj20u011h40b.jpg",
 "danmu":"要死,要死,要死~~~~~~~~~~~~~~~~~~"
 },
 {
 "userPhoto":"http://ww1.sinaimg.cn/large/610dc034ly1fhyeyv5qwkj20u00u0q56.jpg",
 "danmu":"前方高能预警"
 },
 {
 "userPhoto":"http://ww3.sinaimg.cn/large/610dc034jw1f5d36vpqyuj20zk0qo7fc.jpg",
 "danmu":"剧透死全家"
 },
 {
 "userPhoto":"http://7xi8d6.com1.z0.glb.clouddn.com/2017-03-07-003645.jpg",
 "danmu":"我是迟到的freestyle"
 },
 {
 "userPhoto":"http://ww1.sinaimg.cn/large/610dc034ly1fhyeyv5qwkj20u00u0q56.jpg",
 "danmu":"这个碗又大又圆,就像这个剧又污又刺激"
 },
 {
 "userPhoto":"http://ww1.sinaimg.cn/large/610dc034ly1fhyeyv5qwkj20u00u0q56.jpg",
 "danmu":"哈哈哈哈."
 },
 {
 "userPhoto":"https://ws1.sinaimg.cn/large/610dc034ly1fiz4ar9pq8j20u010xtbk.jpg",
 "danmu":"