iOS 弹幕实现分析及原理

弹幕需求

• 弹幕在屏幕上以一定的轨道移动
• 根据弹幕长度定移动速度
• 弹幕文字支持自定义（字体、格式、颜色等）
• 弹幕支持暂停及恢复

实现主要要解决的问题

• 弹幕如何绘制？
• 弹幕如何控制移动速度？
• 弹幕如何检测是否碰撞？
• 弹幕如何暂停移动及恢复移动？

注：“弹幕碰撞”指弹幕移动过程中前一条展示与后一条展示不出现重叠。

根据已知的几个问题，依次提出解决方案。

实现弹幕

弹幕如何绘制

Android 平台DanmakuFlameMaster库中，通过在 View 层的一帧帧的绘制来显示弹幕。对于每一条来说，如果要实现弹幕的流畅性，需要保证每秒绘制的帧数处在一个较高的数字。如果出现大量的弹幕，同时绘制，对设备的性能要求也会很高。所以自定义绘制帧的方式，不一定适用于所有的设备。

除了自定义绘制帧的方式展示弹幕，还可以通过采用系统动画的方式来实现弹幕文本的移动。例如 UIView 动画、Facebook/pop 动画。以系统 UIView 动画为例：

[UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        // bulletLabel 为弹幕内容 label
        bulletLabel.frame = CGRectMake(-bulletLabel.width, bulletLabel.y, bulletLabe.width, bulletLabel.height);
    } completion:^(BOOL finished) {
        //
}];

这样实现了一个弹幕移动的过程。借助于系统 UIView 动画，实现一个滚动过程中，开发者只需要关注动画开始时间、持续时间、动画开始执行的状态和动画结束执行的状态，这里采用的 UILabel frame。具体的滚动动画交于系统来负责，系统会根据设备的性能来调整来做对应的调整。

弹幕如何控制移动速度

首先根据文本的内容的属性（字体、大小）计算出文本显示后的 Width，line 为 1，根据 textWidth 及 screenWidth 来却确定最终的 rate。

计算文本 width 可通过 boundingRect(with:options:attributes:context:)

弹幕如何检测是否碰撞

检测难点在于，怎么在弹幕滚动过程中检测是否碰撞。弹幕的滚动过程中位于同一个 Y 的弹幕，新创建的弹幕显示 frame 需要与正在滚动中的弹幕 frame 进行对照。如果新创建的弹幕滚动的过程中，不与正在滚动中的弹幕有视图重叠。则新创建的弹幕以当前 frame 作为初始位置开始滚动。

那么两者如何进行对照呢？

默认弹幕由右向左滚动，过程中，正在滚动中的弹幕位于左侧，新建的弹幕位于右侧。

如果正在滚动中的弹幕（记为 danmakuL）的开始时刻及结束时刻，弹幕视图都没有与新建弹幕（记为 danmakuR）视图重合。那么新建弹幕在滚动过程中也不会与正在滚动中的弹幕有视图重合的情况出现。

remainTime 代表着字幕存活时间，由于字幕的存活时间是由字幕的长度解决的。字幕越长，滚动过程中速度即越快。所以过程中已 danmakuL 与 danmakuR 间最小滚动时间（miniRemainTime）为标准，进行对比。如果在 miniRemainTime 内，danmakuL 与 danmakuR 之间没有出现重合，那么整个过程中，弹幕也不会出现重合的情况。这样就解决了弹幕碰撞的检测。

演示代码如下：

- (BOOL)checkIsWillHitWithWidth:(float)width danmakuL:(UILabel *)danmakuL danmakuR:(UILabel *)danmakuR {
    if (danmakuL.remainTime<=0) {
        return NO;
    }
    
    if (danmakuL.x + danmakuL.size.width > danmakuR.x) {
        return YES;
    }
    
    float minRemainTime = MIN(danmakuL.remainTime, danmakuR.remainTime);
    float xLeft = [danmakuL xWithScreenWidth:width remainTime:(danmakuL.remainTime - minRemainTime)];
    float xRight = [danmakuR xWithScreenWidth:width remainTime:(danmakuR.remainTime - minRemainTime)];
    if (xLeft + danmakuL.size.width > xRight) {
        return YES;
    }
    return NO;
}

弹幕如何暂停滚动及恢复滚动

在当前的实现过程中，弹幕滚动采用了 UIView 系统动画。动画暂停的基本原理是通过 View 的 presentationLayer 获取 danmake 当前 frame 并作为弹幕暂停后的 frame，再移除 danmake 的 layer 动画。同时记录已滚动时间及当前 danmake frame。

// 暂停弹幕滚动
- (void)pauseDanmaku {
    
    CALayer *layer = danmaku.layer;
    CGRect rect = danmaku.frame;
    danmaku.label.frame = rect;
    [danmaku.label.layer removeAllAnimations];
}

// 开始滚动的方法与新建弹幕滚动方法相同，通过 UIView animation