vue中如何使用vue-baberrage生成弹幕

目录

• 如何使用vue-baberrage生成弹幕
• vue弹幕实现及优化
• 总结

如何使用vue-baberrage生成弹幕

vue-baberrage这个插件本身有好多属性使用后不生效，不知道是不是自己使用的问题 T_T

安装弹幕插件；

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部分；

就这把，都是我改过原来的样式，跟原本的有差距，想要原本样式，可以查看他的文档

git文档地址：https://gitee.com/hoseapps/vue-baberrage

vue弹幕实现及优化

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

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

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

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

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

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

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

声明： 我不是这两者的开发者，只是使用者，如有错误，欢迎指出

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。