iOS弹幕原理及实现

最近公司项目需求，要实现一个弹幕的功能，上网搜集了一些资料，简单实现了弹幕的效果，现在将原理以及实现的过程整理一下。

代码参见* https://github.com/gyf1993/owenDanmaku.git

先简单说明一下实现的原理

1.使用UIViewAnimation动画完成弹幕的移动。
2.所有弹幕从出现到完全消失的时间一样，但是弹幕宽度长的移动的总距离要长，所以在屏幕移动的更快。
3.整个过程都是匀速的，所以添加弹幕时只要判断在开始以及结束时弹幕时是否会碰撞即可。

danmakuview构造方法

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor colorWithRed:235/255.0 green:235/255.0 blue:235/255.0 alpha:1];
        _channelArray = [NSMutableArray new];
        _channelCount = (NSInteger)((SCREEN_HEIGHT - 50)/40);
        for (int i =0; i<_channelCount; i++) {
            NSNumber *number = [NSNumber numberWithBool:YES];
            [_channelArray setObject:number atIndexedSubscript:i];
        }
    }
    return self;
}

弹幕添加方法

- (void)addDanmaku:(NSString *)text
{
    NSDictionary *dictAttribute = @{NSFontAttributeName:[UIFont fontWithName:@"Helvetica-Bold" size:14.0]};
    CGRect rect = [text boundingRectWithSize:CGSizeMake(MAXFLOAT, 50) options:NSStringDrawingUsesLineFragmentOrigin attributes:dictAttribute context:nil];
    CGFloat width = (int)rect.size.width + 1;
    UILabel *newBullet = [[UILabel alloc]initWithFrame:CGRectMake(SCREEN_WIDTH, 0, width, 40)];
    newBullet.text = text;
    newBullet.font = [UIFont fontWithName:@"Helvetica-Bold" size:14.0];
    int i = 0;
    for (i = 0; i<_channelArray.count; i++) {
        NSObject *object = _channelArray[i];
        if ([object isKindOfClass:[NSNumber class]]) {
            [self addSubview:newBullet];
            [_channelArray setObject:newBullet atIndexedSubscript:i];
            newBullet.frame = CGRectMake(SCREEN_WIDTH,  i * 40, width, 40);
            //UIViewAnimationOptionCurveLinear使整个动画过程匀速
            [UIView animateWithDuration:DanmakuTime delay:0 options:(UIViewAnimationOptionCurveLinear) animations:^{
                newBullet.frame = CGRectMake(0 - width,  i * 40,width, 40);
            } completion:^(BOOL finished) {
                [newBullet removeFromSuperview];
            }];
            break;
        }else if ([object isKindOfClass:[UILabel class]])
        {
            UILabel *bullet = (UILabel*)object;
            if ([self canBulletSendInTheChannel:bullet newBullet:newBullet]) {
                [self addSubview:newBullet];
                [_channelArray setObject:newBullet atIndexedSubscript:i];
                newBullet.frame = CGRectMake(SCREEN_WIDTH,  i * 40, width, 40);
                [UIView animateWithDuration:DanmakuTime delay:0 options:(UIViewAnimationOptionCurveLinear) animations:^{
                    newBullet.frame = CGRectMake(0 - width, i * 40,width, 40);
                } completion:^(BOOL finished) {
                    [newBullet removeFromSuperview];
                }];
                break;
            }
        }
    }
}

判断弹幕是否可以添加方法

- (BOOL)canBulletSendInTheChannel:(UILabel *)bullet newBullet:(UILabel *)newBullet
{
    //获取动画中，控件的frame
    CGRect rect = [bullet.layer.presentationLayer frame];
    if (rect.origin.x>SCREEN_WIDTH - bullet.frame.size.width) {
        //弹道当前弹幕还没完全显示在屏幕中，返回NO
        return NO;
    }else if (rect.size.width == 0)
    {
        //刚刚添加的控件，有可能取到frame的值全为0，也要返回NO
        return NO;
    }
    else if (bullet.frame.size.width > newBullet.frame.size.width) {
        //排除了以上两种情况，比较弹幕的宽度（也就是比较速度）,新弹幕宽度小也就是永远追不上上一条弹幕,返回YES
        return YES;
    }else
    {
        //time为新弹幕从出现到屏幕最左边的时间（此时弹幕整体都在屏幕内，并不是弹幕消失的时间）
        CGFloat time = SCREEN_WIDTH/(SCREEN_WIDTH+newBullet.frame.size.width)*DanmakuTime;
        //endX为此时老弹幕的frame的x值
        CGFloat endX = rect.origin.x - time/DanmakuTime*(SCREEN_WIDTH + bullet.frame.size.width);
        if (endX < -bullet.frame.size.width) {
            //若此时老弹幕已经完全从屏幕中消失，返回YES
            return YES;
        }
    }
    return NO;
}

至此，一个简单的弹幕效果就实现了。