前端实现直播弹幕

1：DOM实现

实现思路：

1，在一定的可视区划分出几条水平轨道，然后在轨道中添加弹幕，这样基本可以防止弹幕的重叠

2，建立所需要的dom节点并添加到dom池里面，dom节点总数=轨道数X每条轨道可放置的最大弹幕数，并把建好的dom节点加入到可视区容器里面通过添加class使其定位到可视区外部,并绑定相应的事件进行逻辑处理(注意作用域问题)

3,建立轨道是否可放置弹幕判断函数，此位置为true则表示此条轨道可进行弹幕的展示，否则不行，当弹幕运动一定的时间后可以把此条轨道的状态置为true

4，建立轨道选择函数，通过依次遍历轨道状态来选择一条轨道进行弹幕的展示，若不存在这样的轨道则返回-1

5,建立弹幕发送函数，从弹幕池依次中取出弹幕，从dom池中依次取出dom，组装成dom节点，然后给此dom增删相应的css属性实现dom的运动(此实现使用的是transtion+transform来实现dom运动，可大大提高性能)

6，添加一个定时器，定时触发弹幕发送函数

7，关闭弹幕，停止定时器，同时把所有dom节点移到不可见区域，添加弹幕，把弹幕信息push到弹幕池

核心代码：

html：

关闭弹幕

发送

js（使用了jq）：

 

注：弹幕.js里面是用户发送的弹幕，这里我随便编的几个弹幕来进行模拟的结构是

var _data_=[

{

img:'',//发送弹幕用户的头像

content:""//弹幕内容

}

................

]

效果：

 

总结：

设计优点;利用css3动画通过修改class自动实现了运动，实现起来较为简单且兼容性较强，性能也还不错，但是在dom绑定transitionend事件时要注意变量作用域，这里我使用let不会有什么问题，使用var时要注意闭包问题、

缺点：不断通过定时器来进行弹幕剩余检测，会消耗部分性能

 

2：canvas实现

实现思路基本和上面一致，

1，创建canvas,fillText构造函数用来创建弹幕对象

2，轨道划分判断原则，当此条轨道发出弹幕的瞬间状态置为“忙碌”，当运动一段时间后置空闲，再在剩余空闲的轨道中随机选择一条这样就基本避免了弹幕重叠的问题。

3，弹幕运动，通过定时器修改弹幕的坐标，并且重绘所有弹幕

4，发送弹幕，通过定时器定时检测弹幕池如果有弹幕则发射弹幕

 

核心代码：

html:

发送

JS:

script src="弹幕数据.js" charset="UTF-8">

 

效果：

分析：当弹幕数量较多时，有一定的优势

缺点，原生的定时器实现运动可能会很僵硬，可以借助js动画库