vue怎么使用vue-baberrage生成弹幕

如何使用vue-baberrage生成弹幕

安装弹幕插件；

npm install vue-baberrage --save

创建vue组件，在组件中引用vue-baberrage；

  import Vue from 'vue';
  import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
  Vue.use(vueBaberrage);

html部分；

其中有几个属性设置后不生效，自己测试下吧；

javaScript部分；

css部分；

  .baberrage-item{
    /*height: .5rem!important;*/
  }
  //强行改变弹幕背景色
  .baberrage-item .normal{
    background: rgba(0,0,0,0.3)!important;
  }
  .normal{
    .baberrage-msg{
      /*padding: .1rem!important;*/
    }
    .baberrage-avatar{
      display: none;
    }
//弹幕前头像不展示
    img{   
      display: none;
    }
  }
  .baberrage-avatar{
    img{
      width: 20px !important;
      height: 20px!important;
    }
  }
  .barrages-drop {
    .blue {
      border-radius: 100px;
      background: #e6ff75;
      color: #fff;
    }

    .green {
      border-radius: 100px;
      background: #75ffcd;
      color: #fff;
    }
    .red {
      background: rgba(0,0,0,0.1);
      color: red;
    }
    .yellow {
      border-radius: 100px;
      background: #dfc795;
      color: #fff;
    }
    .baberrage-stage {
      position: absolute;
      width: 100%;
      overflow: hidden;
      top: 0;
    }
  }

vue弹幕实现及优化

起因： 活动需求需要使用弹幕的形式展示内容

解决： 首先是找到一个vue-baberrage

然后使用起来看起来也没有什么问题，最后当我打开浏览器rendering的paint flash发现重绘严重

最后找到一个vue-danmaku 组件，发现不会频繁重绘

定位：弹幕移动使用transform改变位置，并使用will-change进行优化

will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率

大量的节点动画渲染可以选择canvas或者webgl进行开发