菜单

iOS弹幕的规律分析以及贯彻

2018年9月25日 - 注册免费送38元体验金

写以前方

否利大家读,在视频网站上录了对应的视频
想看视频的情侣点这里呀~~

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

乘势90继的不止崛起,弹幕越来越受年轻人的喜爱。所谓弹幕,我之敞亮就是是评价的其它一样栽表现形式,更能够吸引用户眼球,增强用户体验,增加用户参与感和使用粘度。现在境内比较火的弹幕类视频网站A站和B站,深受年轻人群的追捧。下边就是B站的一个显示力量。

弹幕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地图