菜单

iOS弹幕的原理分析与落到实处

2019年1月26日 - 注册免费送38元体验金

写在前头

为便利大家学习,在视频网站上录了相应的视频
想看视频的敌人点这里呀~~

<p>何为弹幕?~~</p>

乘机90后的不停杰出,弹幕越来越受到年轻人的友爱。所谓弹幕,我的通晓就是评价的另一种表现格局,更能引发用户眼球,增强用户体验,扩大用户参与感和使用粘度。现在境内相比较火的弹幕类视频网站A站B站,深受年轻人群的追捧。下边就是B站的一个显示效果。

注册免费送38元体验金,弹幕demo

此外一些情报资讯类的app也初始落到实处弹幕作用,为得到用户喜爱,比如唔哩、微在、橘子娱乐等等。上边大家就来共同分析一下,弹幕在iOS端是怎么兑现的吗?

<p>原理分析与贯彻~~</p>

先是大家来分析一下弹幕的特性。

据悉以上特点,大家布置出来的弹幕情势大体如下图所示,默许只有多少个弹道(弹幕飞行轨道)来展现弹幕飞行意义。

  1. 起初化多个弹幕1、2、3准备进入显示屏,DataSource为弹幕资源的数额来源地。
1.初始化弹幕
  1. 当弹幕陆陆续续进入显示屏,飞行速度与弹幕长度相关,每当其中一个弹道的弹幕完全进入显示器后,则从数据池中取出一个弹幕在相应弹道进入显示器,如弹幕4。
2. 弹幕进入屏幕
  1. 只要某条弹幕已经完全飞出显示屏,则将此弹幕从显示器中除去,如弹幕1和弹幕3。
3. 弹幕飞出屏幕
  1. 当弹幕全体飞出屏幕,回到步骤1,重新滚动播放

<p>技术达成~~</p>

上边从技术层面来啄磨一下已毕细节,以下是一对主导代码,完整代码参见这里
先是来看一下弹幕的扭转进度,初阶化多个弹幕轨迹,若是不足八个,创立2个或者1个轨迹,代码(BulletManager.m)如下:

- (void)start {
    if (self.tmpComments.count == 0) {
        [self.tmpComments addObjectsFromArray:self.allComments];
    }
    self.bStarted = YES;
    self.bStopAnimation = NO;
    [self initBulletCommentView];
}
/**
  *  初始化弹幕
  */
- (void)initBulletCommentView {
    //初始化三条弹幕轨迹
    NSMutableArray *arr = [NSMutableArray arrayWithArray:@[@(0), @(1), @(2)]];
    for (int i = 3; i > 0; i--) {
        NSString *comment = [self.tmpComments firstObject];
        if (comment) {
            [self.tmpComments removeObjectAtIndex:0];
            //随机生成弹道创建弹幕进行展示(弹幕的随机飞入效果)
            NSInteger index = arc4random()%arr.count;
            Trajectory trajectory = [[arr objectAtIndex:index] intValue];
            [arr removeObjectAtIndex:index];
            [self createBulletComment:comment trajectory:trajectory];
        } else {
            break;
        }
    }
}

开创弹幕view,对弹幕view的各样地点状态进行监听并做出相对应的处理。

 /**
  *  创建弹幕
  *
  *  @param comment    弹幕内容
  *  @param trajectory 弹道位置
  */
  - (void)createBulletComment:(NSString *)comment trajectory:(Trajectory)trajectory {
       if (self.bStopAnimation) {
           return;
       }
       //创建一个弹幕view
       BulletView *view = [[BulletView alloc] initWithContent:comment];
       //设置运行轨迹
       view.trajectory = trajectory;
       __weak BulletView *weakBulletView = view;
       __weak BulletManager *myself = self;
       /**
         *  弹幕view的动画过程中的回调状态
         *  Start:创建弹幕在进入屏幕之前
         *  Enter:弹幕完全进入屏幕
         *  End:弹幕飞出屏幕后  
         */             
       view.moveBlock = ^(CommentMoveStatus status) {
           if (myself.bStopAnimation) {
               return ;
           }
           switch (status) {
               case Start:
                   //弹幕开始……将view加入弹幕管理queue
                   [self.bulletQueue addObject:weakBulletView];
                   break;
               case Enter: {
                   //弹幕完全进入屏幕,判断接下来是否还有内容,如果有则在该弹道轨迹对列中创建弹幕……
                   NSString *comment = [myself nextComment];
                   if (comment) {
                       [myself createBulletComment:comment trajectory:trajectory];
                   } else {
                       //说明到了评论的结尾了
                   }
                   break;
               }
               case End: {
                   //弹幕飞出屏幕后从弹幕管理queue中删除
                   if ([myself.bulletQueue containsObject:weakBulletView]) {
                       [myself.bulletQueue removeObject:weakBulletView];
                   }
                   if (myself.bulletQueue.count == 0) {
                       //说明屏幕上已经没有弹幕评论了,循环开始
                       [myself start];
                   }
                   break;
               }
               default:
                  break;
           }
       };    
       //弹幕生成后,传到viewcontroller进行页面展示
       if (self.generateBulletBlock) {
            self.generateBulletBlock(view);
       }
  }
  - (NSString *)nextComment {
     NSString *comment = [self.tmpComments firstObject];
     if (comment) {
         [self.tmpComments removeObjectAtIndex:0];
     }
     return comment;
  }

弹幕view的卡通片执行,部分代码(BulletView.m)如下:

在viewcontroller中直接调用以下代码:

self.bulletManager = [[BulletManager alloc] init];
__weak ViewController *myself = self;
self.bulletManager.generateBulletBlock = ^(BulletView *bulletView) {
    [myself addBulletView:bulletView];
};

- (void)addBulletView:(BulletView *)bulletView {
    bulletView.frame = CGRectMake(CGRectGetWidth(self.view.frame)+50, 200 + 34 * bulletView.trajectory, CGRectGetWidth(bulletView.bounds), CGRectGetHeight(bulletView.bounds));
    [self.view addSubview:bulletView];
    [bulletView startAnimation];
}
//点击开始按钮,弹幕开始飞入屏幕
- (void)clickStart:(UIButton *)btn {
    [self.bulletManager start];
}

末尾浮现效果如下:

d

查看完整代码,下载地址

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图