阅读 537

如何在vue的项目中写一个简易的网页弹幕

最近整了一个个人网站,没啥内容于是就想弄个弹幕玩玩充实一下网站。

功能预览:www.love614.live

首先是创建一个弹幕版用来播放弹幕:

.danmuBox就是容器了,.danmu就是一条条的弹幕。其中messageList显然就是所有弹幕的集合了,至于styleList就是弹幕播放的核心了,它将用来控制整个弹幕的播放流程。

其实到这里我的逻辑应该也能推出来一些了,就是通过控制每条弹幕的样式(主要是left、top和transition)来控制弹幕播放。然而说起来简单,操作起来还是比较麻烦的,主要麻烦的就是styleList的维护,因为一个还不错弹幕起码要满足以下条件:

1.弹幕出现的高度要随机。

2.尽量避免弹幕内容重合

3.弹幕的滚动速度最好不能一样

以上13都还好处理,主要2比较麻烦,目前我写的弹幕也只是好了一些,还没有完全避免内容重合的问题。

首先我们看一下.danmu的样式:

能看到弹幕在初始阶段其实都已经在屏幕的最右边准备好了的,就像一个个握着方向盘蓄势待发的老司机。

然后重点就是有序的让它们上台了,需要注意的是因为要避免“追尾”,它们需要分批在不同地方上台。此时我们假设弹幕版的高度一共是300px,每条弹幕的高度是30px,那么就可以知道一共有10条”跑道”可以用来岔开“老司机”,我们先来获取一下跑道数量把:

拿到danmuListL以后,我们通过window.danmuQueue来存放跑道,假设danmuListL = 5,那么 window.danmuQueue =[1,2,3,4,5]

好的,现在跑道准备好了,老司机也准备好了,是时候开始出发了:

这是一个定时器,它每两秒会发送一条弹幕,首先我们需要定义一个index来保存当前发送弹幕的数量,存在vue实例上就行,然后每次发送弹幕前,先判断弹幕数量是否为0或者是否弹幕已经发送完,如果还有弹幕需要发送,那我们就可以进入下一步了:准备跑道

这一步也比较麻烦,因为要避免“追尾”,所以我们首先需要创建一个集合danmuList来存放当前已经发送过弹幕的跑道,从而知道还没有发送过弹幕的跑道,这才是本次可以用的跑道,列入window.danmuQueue =[1,2,3,4,5],而前两次1号和2号跑道刚发送过弹幕,那么第三条只能从3.4.5三条选一条才能尽量避免追尾事件,所以上面的代码中noOneList就代表还没有发送过弹幕的跑道了,在其中随机选择一个跑道发送弹幕以后需要存到danmuList中来告诉下一次发送:这条弹幕刚发送过!这个行为会一直持续到所有的跑道都发送过弹幕然后清空记录,重新记录为止

最后把该弹幕对应的样式推送到styleList就可以了!

这样,一个简易的弹幕就完成啦。

附加功能:

1.实时发送弹幕:

这个就很简单了,我们只要实时更新一下messageList然后监听变化就可以啦

2.不同分辨率的显示器应该有不同的滚动速度,比如1200px和1920px的显示器,滚动速度显然不应该在一个范围内,不然速度太快或者太慢都很难看。

像这样 咱们按照不同的分辨率给不同的范围就好了。

最后:欢迎各位来我的网站给弹幕添姿加彩*-*