在写得时候有点感觉把插件当做一个系统来写了,想要放进去的功能越来越多,还是先把基础功能做了。
比较1.0需要提升的地方
1. 滚动最小单位为单条弹幕
问题描述
滚动的最小单位为单条弹幕,造成的情况是大量Div同时修改,JS计算量巨大,虽然使用了position: absolute
脱离了文档流,不会引起reflow和repaint,但是大量弹幕同时渲染也是会降低动画质量。
解决方案
引入一个新的滚动单位,弹幕块,在一定时间内(默认3秒,或熟练达到3条)的弹幕会group在一起,加入到一个弹幕块中,真正动的就是弹幕块,降低了JS的运算量。
2. 弹幕过多时杂乱无章
问题描述
1.0使用的是随机top
来加入弹幕,当弹幕过多的时候,会十分杂乱,上下两行会有重叠现象,可读性差,也难以加入稳定的互动操作。
解决方案
加入弹幕泳道的概念,舞台建立后,会加入多条泳道(默认3条),弹幕块会加入到泳道中进行移动,保证上下泳道不会重叠阻挡。(如下图)
3. setTimeout过多
问题描述
因为弹幕的滚动组件单位是弹幕本身,每加入一个弹幕都会启动一个setTimeout
来控制它自身的动画,当有大量弹幕的时候,大量的setTimeout导致性能降低,出现动画跳帧等情况。
解决方案
插件核心维护一个中心的计时器(采用requestAnimationFrame),受机场的行李输送带启发,整个弹幕舞台就是一个传送带:
而我们的弹幕块就是传送带上的行李,当弹幕块加入到传送带上之后,就会收到传送带上的推力,从而计算自身的移动量。