fly-barrage 前端弹幕库（5）：高级弹幕的设计与实现

项目官网地址：fly-barrage.netlify.app/；

👑🐋🎉如果感觉项目还不错的话，还请点下 star 🌟🌟🌟。

Gitee：gitee.com/fei_fei27/f…（Gitee 官方推荐项目）；

Github：github.com/feiafei27/f…；

其他系列文章：

fly-barrage 前端弹幕库（1）：项目介绍

fly-barrage 前端弹幕库（2）：弹幕内容支持混入渲染图片的设计与实现

fly-barrage 前端弹幕库（3）：滚动弹幕的设计与实现

fly-barrage 前端弹幕库（4）：顶部、底部弹幕的设计与实现

高级弹幕的计算是最简单的，因为每个高级弹幕和其他弹幕是无交互的，不需要处理相互重叠的问题，只需要根据当前视频的播放时间计算出高级弹幕处于的位置即可。

export default class SeniorBarrage extends BaseBarrage {
  constructor(seniorBarrageOptions: SeniorBarrageOptions, barrageRenderer: BarrageRenderer) {}
}

export type SeniorBarrageOptions = BaseBarrageOptions & {
  
  barrageType: 'senior';
  
  seniorBarrageConfig: SeniorBarrageConfig;
}


export type Location = {
  x: number;
  y: number;
}


export type LocationDefine = Location & {
  
  type?: 'PIXEL' | 'PERCENT';
  
  offsetX?: number;
  offsetY?: number;
}


export type SeniorBarrageConfig = {
  
  startLocation: LocationDefine;
  
  endLocation: LocationDefine;
  
  totalDuration: number;
  
  delay: number;
  
  motionDuration: number;
}

高级弹幕的运动分为三部分：

• 运动前（此时位置一定是在 startLocation）；
• 运动时（根据运动时间、运动速度以及 startLocation 可以计算出来）；
• 运动完成（此时的位置 endLocation）；

export default class SeniorBarrage extends BaseBarrage {
  constructor(seniorBarrageOptions: SeniorBarrageOptions, barrageRenderer: BarrageRenderer) {
    this.calcActualLocation();
  }

  
  calcActualLocation() {
    const { startLocation, endLocation, motionDuration } = this.seniorBarrageConfig;

    
    
    let actualStartLocationX = (startLocation.type || 'PIXEL') === 'PIXEL' ? startLocation.x : startLocation.x * this.canvasSize.width;
    let actualStartLocationY = (startLocation.type || 'PIXEL') === 'PIXEL' ? startLocation.y : startLocation.y * this.canvasSize.height;
    if (startLocation.offsetX) actualStartLocationX += startLocation.offsetX;
    if (startLocation.offsetY) actualStartLocationY += startLocation.offsetY;
    this.actualStartLocation = {
      x: actualStartLocationX,
      y: actualStartLocationY
    };
    
    let actualEndLocationX = (endLocation.type || 'PIXEL') === 'PIXEL' ? endLocation.x : endLocation.x * this.canvasSize.width;
    let actualEndLocationY = (endLocation.type || 'PIXEL') === 'PIXEL' ? endLocation.y : endLocation.y * this.canvasSize.height;
    if (endLocation.offsetX) actualEndLocationX += endLocation.offsetX;
    if (endLocation.offsetY) actualEndLocationY += endLocation.offsetY;
    this.actualEndLocation = {
      x: actualEndLocationX,
      y: actualEndLocationY
    };

    
    this.vx = (this.actualEndLocation.x - this.actualStartLocation.x) / motionDuration;
    this.vy = (this.actualEndLocation.y - this.actualStartLocation.y) / motionDuration;
  }
}

这里根据用户提供的配置计算出起始点以及结束点的实际坐标，并根据 运动路程 / 运动时间 计算出运动速度，这些关键数据是在接下来计算高级弹幕实时位置时需要的。

getRenderSeniorBarrages(time: number): SeniorBarrage[] {
  
  const renderSeniorBarrages = this.seniorBarrageInstances.filter(barrage =>
    
    time >= barrage.time &&
    time <= (barrage.time + barrage.seniorBarrageConfig.totalDuration)
  );

  
  renderSeniorBarrages.forEach(barrage => {
    const startPoint = barrage.time;
    const delayEndPoint = startPoint + barrage.seniorBarrageConfig.delay;
    const motionEndPoint = delayEndPoint + barrage.seniorBarrageConfig.motionDuration;

    if (time >= startPoint && time <= delayEndPoint) {
      
      barrage.left = barrage.actualStartLocation.x;
      barrage.top = barrage.actualStartLocation.y;
    } else if (time >= delayEndPoint && time <= motionEndPoint) {
      
      
      const motionTime = time - delayEndPoint;
      barrage.left = barrage.actualStartLocation.x + motionTime * barrage.vx;
      barrage.top = barrage.actualStartLocation.y + motionTime * barrage.vy;
    } else {
      
      barrage.left = barrage.actualEndLocation.x;
      barrage.top = barrage.actualEndLocation.y;
    }
  });

  return renderSeniorBarrages;
}

首先根据弹幕的出现时间和 totalDuration 以及当前的 time 过滤出当前应该渲染的高级弹幕。

然后遍历应该渲染的弹幕，进行渲染位置的计算，在这里，先计算出高级弹幕所处于的运动阶段，如果是运动前的话，弹幕的渲染位置就是上文计算好的 actualStartLocation，然后是运动后的话，弹幕的渲染位置就是上文计算好的 actualEndLocation，如果是运动中的话，可以根据运动时间以及速度计算出运动的偏移量，再将偏移量加上起始点的位置即可计算出弹幕此时应该渲染的位置。