原生JavaScript实现弹幕组件的方法

前言

如今几乎所有的视频网站都有 弹幕功能，那么今天我们就自己用 原生   封装一个弹幕类。这个类希望有如下属性和实例方法：

属性

el容器节点的选择器，容器节点应为绝对定位，设置好宽高

height 每条弹幕的高度

mode 弹幕模式，half则为一半容器高度，top为三分之一，full为占满

speed弹幕划过屏幕的时间

gapWidth后一条弹幕与前一条弹幕的距离

方法

pushData 添加弹幕元数据

addData持续加入弹幕

start开始调度弹幕

stop停止弹幕

restart 重新开始弹幕

clearData清空弹幕

close关闭

open重新显示弹幕

PS：有一些自封装的工具函数就不贴出来了，大概知道意思就好

初始化

引入 文件之后，我们希望如下使用，先采取默认配置。

let barrage = new Barrage({    el: '#container'})

参数初始化：

function Barrage(options) {    let {        el,        height,        mode,        speed,        gapWidth,    } = options    this.container = document.querySelector(el)    this.height = height || 30    this.speed = speed || 15000 //2000ms    this.gapWidth = gapWidth || 20    this.list = []    this.mode = mode || 'half'    this.boxSize = getBoxSize(this.container)    this.perSpeed = Math.round(this.boxSize.width / this.speed)    this.rows = initRows(this.boxSize, this.mode, this.height)    this.timeoutFuncs = []    this.indexs = []    this.idMap = []}

先接受好参数然后初始化，下面看看 getBoxSize 和 initRows

function getBoxSize(box) {    let {        height,        width    } = window.getComputedStyle(box)    return {        height: px2num(height),        width: px2num(width)    }    function px2num(str) {        return Number(str.substring(0, str.indexOf('p')))    }}

通过 getComputedStyleapi 计算出盒子的宽高，这里用来计算容器的宽高，之后也会用到。

function initRows(box, mode, height) {    let divisor = getDivisor(mode)    rows = Math.ceil(box.height * divisor / height)    return rows}function getDivisor(mode) {    let divisor = .5    switch (mode) {        case 'half':            divisor = .5            break        case 'top':            divisor = 1 / 3            break;        case 'full':            divisor = 1;            break        default:            break;    }    return divisor}

根据高度算出弹幕应该有多少行，下面会有地方用到行数。

插入数据

有两种插入数据的方法，一种是添加源数据，一种是持续添加。先来看添加源数据的方法：

this.pushData = function (data) {    this.initDom()    if (getType(data) == '[   ]') {        //插入单条        this.pushOne(data)    }    if (getType(data) == '[  Array]') {        //插入多条        this.pushArr(data)    }}this.initDom = function () {    if (!document.querySelector(`${el} .barrage-list`)) {        //注册dom节点        for (let i = 0; i < this.rows; i++) {            let div = document.createElement('div')            div.classList = `barrage-list barrage-list-${i}`            div.style.height = `${this.boxSize.height*getDivisor(this.mode)/this.rows}px`            this.container.appendChild(div)        }    }}

this.pushOne = function (data) {    for (let i = 0; i < this.rows; i++) {        if (!this.list[i]) this.list[i] = []    }    let leastRow = getLeastRow(this.list) //获取弹幕列表中最少的那一列，弹幕列表是一个二维数组    this.list[leastRow].push(data)}this.pushArr = function (data) {    let list = sliceRowList(this.rows, data)    list.forEach((item, index) => {        if (this.list[index]) {            this.list[index] = this.list[index].concat(...item)        } else {            this.list[index] = item        }    })}//根据行数把一维的弹幕list切分成rows行的二维数组function sliceRowList(rows, list) {    let sliceList = [],        perNum = Math.round(list.length / rows)    for (let i = 0; i < rows; i++) {        let arr = []        if (i == rows - 1) {            arr = list.slice(i * perNum)        } else {            i == 0 ? arr = list.slice(0, perNum) : arr = list.slice(i * perNum, (i + 1) * perNum)        }        sliceList.push(arr)    }    return sliceList}

持续加入数据的方法只是调用了添加源数据的方法，并且开始了调度而已

this.addData = function (data) {    this.pushData(data)    this.start()}

发射弹幕

下面来看看发射弹幕的逻辑

this.start = function () {    //开始调度list    this.dispatchList(this.list)}this.dispatchList = function (list) {    for (let i = 0; i < list.length; i++) {        this.dispatchRow(list[i], i)    }}this.dispatchRow = function (row, i) {    if (!this.indexs[i] && this.indexs[i] !== 0) {        this.indexs[i] = 0    }    //真正的调度从这里开始，用一个实例变量存储好当前调度的下标。    if (row[this.indexs[i]]) {        this.dispatchItem(row[this.indexs[i]], i, this.indexs[i])    }}

this.dispatchItem = function (item, i) {    //调度过一次的某条弹幕下一次在调度就不需要了    if (!item || this.idMap[item.id]) {        return    }    let index = this.indexs[i]    this.idMap[item.id] = item.id    let div = document.createElement('div'),        parent = document.querySelector(`${el} .barrage-list-${i}`),        width,        pastTime    div.innerHTML = item.content    div.className = 'barrage-item'    parent.appendChild(div)    width = getBoxSize(div).width    div.style = `width:${width}px;display:none`    pastTime = this.computeTime(width) //计算出下一条弹幕应该出现的时间    //弹幕飞一会~    this.run(div)    if (index > this.list[i].length - 1) {        return    }    let len = this.timeoutFuncs.length    //记录好定时器，后面清空    this.timeoutFuncs[len] = setTimeout(() => {        this.indexs[i] = index + 1        //递归调用下一条        this.dispatchItem(this.list[i][index + 1], i, index + 1)    }, pastTime);}

//用css动画，整体还是比较流畅的this.run = function (item) {    item.classList += ' running'    item.style.left = "left:100%"    item.style.display = ''    item.style.animation = `run ${this.speed/1000}s linear`    //已完成的打一个标记    setTimeout(() => {        item.classList+=' done'    }, this.speed);}

//根据弹幕的宽度和gapWth，算出下一条弹幕应该出现的时间this.computeTime = function (width) {    let length = width + this.gapWidth    let time = Math.round(length / this.boxSize.width * this.speed/2)    return time}

动画css具体如下

@key s run {    0% {        left: 100%;    }    50% {        left: 0    }    100% {        left: -100%;    }}.run {    animation-name: run;}

其余方法

停止：利用动画的paused属性停止

this.stop = function () {    let items = document.querySelectorAll(`${el} .barrage-item`);    [...items].forEach(item => {        item.className += ' pause'    })}

.pause {    animation-play-state: paused !important;}

重新开始

移除pause类即可

this.restart = function () {    let items = document.querySelectorAll(`${el} .barrage-item`);    [...items].forEach(item => {        removeClassName(item, 'pause')    })}

打开关闭

做一个显示隐藏的逻辑即可

this.close = function () {    this.container.style.display = 'none'}this.open = function () {    this.container.style.display = ''}

清理弹幕

this.clearData = function () {    //清除list    this.list = []    //清除dom    document.querySelector(`${el}`).innerHTML = ''    //清除timeout    this.timeoutFuncs.forEach(fun => clearTimeout(fun))}

最后用一个定时器定时清理过期的弹幕:

setInterval(() => {    let items = document.querySelectorAll(`${el} .done`);    [...items].forEach(item=>{        item.parentNode.removeChild(item)    })}, this.speed*5);

最后

感觉这个的实现还是有缺陷的，如果是你设计这么一个类，你会怎么设计呢？

下载链接：网站源码/小程序源码/网站模板下载

Tags： 方法 实现 弹幕 原生 组件