【Vue-baberrage弹幕插件重制(2)】旧版本比较和解决方案

在写得时候有点感觉把插件当做一个系统来写了,想要放进去的功能越来越多,还是先把基础功能做了。

比较1.0需要提升的地方

1. 滚动最小单位为单条弹幕

问题描述

滚动的最小单位为单条弹幕,造成的情况是大量Div同时修改,JS计算量巨大,虽然使用了position: absolute脱离了文档流,不会引起reflow和repaint,但是大量弹幕同时渲染也是会降低动画质量。

解决方案

引入一个新的滚动单位,弹幕块,在一定时间内(默认3秒,或熟练达到3条)的弹幕会group在一起,加入到一个弹幕块中,真正动的就是弹幕块,降低了JS的运算量。

2. 弹幕过多时杂乱无章

问题描述

1.0使用的是随机top来加入弹幕,当弹幕过多的时候,会十分杂乱,上下两行会有重叠现象,可读性差,也难以加入稳定的互动操作。

解决方案

加入弹幕泳道的概念,舞台建立后,会加入多条泳道(默认3条),弹幕块会加入到泳道中进行移动,保证上下泳道不会重叠阻挡。(如下图)

lane

3. setTimeout过多

问题描述

因为弹幕的滚动组件单位是弹幕本身,每加入一个弹幕都会启动一个setTimeout来控制它自身的动画,当有大量弹幕的时候,大量的setTimeout导致性能降低,出现动画跳帧等情况。

解决方案

插件核心维护一个中心的计时器(采用requestAnimationFrame),受机场的行李输送带启发,整个弹幕舞台就是一个传送带:

lane_go

而我们的弹幕块就是传送带上的行李,当弹幕块加入到传送带上之后,就会收到传送带上的推力,从而计算自身的移动量。