弹幕组件

弹幕组件实现主要为DOM或Canvas实现。
主要涉及基本思路。

弹幕组件的设计

弹幕组件可以基本拆分为背景+弹道+弹幕的形式，其他的功能可以通过其他组件形式添加到背景上。

CSS3

弹幕的基本DOM结构

<!--容器-->
<div class="barrage-container" v-if="visible">
    <!--弹幕轨道-->
    <div
      class="barrage-tunnel"
      v-for="(tunnel, tindex) in tunnelList"
      :key="tindex"
    >
      <!--弹幕-->
      <div
        :class="{ 'barrage-item': true, 'barrage-move': true }"
        v-for="(barrage, index) in tunnel.barrageList"
        :key="barrage.id"
        :style="{
          'animation-duration': barrage.duration + 's',
          'animation-play-state': barrage.paused ? 'paused' : 'running',
        }"
        @animationend="handleAnimationend($event, tindex, index)"
        @click="handleClick($event, tindex, index,barrage)"
      >
      <!--弹幕内容-->
      
      </div>
    </div>

    
  </div>

动画 slidein,记得启用CSS硬件加速

@keyframes slidein {
  0% {
    transform: translate3d(100%, 0, 0)
  }
  100% {
    transform: translate3d(-200%, 0, 0)
  }
}

控制
通过监听DOM事件，改变对应的弹幕DOM属性、样式等，再重渲染时生效

Canvas

通过设置画布canvas,绘制弹幕文字或图片，设置x坐标，然后通过requestAnimationFrame不停的重绘并设置新的x坐标产生偏移量，达到动画的效果

两者各有优劣

DOM实现
优点：
1.DOM本身易于操作，有比较丰富的api
2.定义样式和动画，较为方便，通过CSS3\requestAnimationFrame等即可完成
缺点：
1.使用DOM操作存在自动重绘
2.若存在大量的弹幕即大量的DOM，会增加内存消耗，同时也会使重绘变的卡顿

Canvas实现
优点：
1.速度快
2.在渲染和动画时，可控制的颗粒度比DOM要细
3.可以处理大量元素，但不会增加消耗
缺点：
1.展示图像越大，渲染速度会慢
2.api复杂，使用便利程度不如DOM

参考

1.https://github.com/wechat-miniprogram/miniprogram-barrage