awesome-danmaku

awesome-danmaku 是什么

awesome-danmaku 是一款解决前端弹幕场景需求的插件，目前由原生 DOM + CSS3 实现，无依赖库。

Demos

• First Demo

下载

$ npm install awesome-danmaku

使用

最简易的起步

<div id="app"></div>

import AwesomeDanmaku from 'awesome-danmaku'
const player = AwesomeDanmaku.getPlayer('#app')

// play 和 insert 这两个主要操作没有先后次序的要求，你亦可以先插入后再启动控制器
player.play()
player.insert([
  'Hello Awesome Danmaku!',
  '我是第1条弹幕...',
  '我是第2条弹幕...',
  '我是第3条弹幕...',
])  

使用 CommonJs

const AwesomeDanmaku = require('awesome-danmaku')

使用 <script> 标签引入

<script src="dist/danmaku.browser.js"></script>

API

getPlayer(selectors | HTMLElement | config): Player

// 获取弹幕机 Player
AwesomeDanmaku.getPlayer('#app')

// 传入更详细的配置，这里增加了「弹幕最大数」与「弹幕轨道数」的参数
AwesomeDanmaku.getPlayer({
  el: '#app',
  nodeMaxCount: 50,
  trackCount: 5
})

Player

play()

// 启动弹幕机
Player.play()

pause()

// 暂停弹幕机，重启可直接使用 play()
Player.pause()

stop()

// 关闭弹幕机，清空弹幕发送队列与数据
Player.stop()

insert(string | config [, sync])

// 将弹幕内容置入弹幕机
// sync 默认为 false，该条弹幕会进入弹幕发送队列，加载列表数据时通常建议使用异步模式
Player.insert('Hello Awesome-Danmaku!')

// sync 为 true 时，该条弹幕将立即显示，适合用于用户发送弹幕(插队)
Player.insert({
  value: 'Hello Awesome-Danmaku!',
  opacity: 0.8,
  color: '#ff0000',
}, true)

// 参数可以以数组方式传递
Player.insert([
  '这是一条普通的弹幕',
  {
    value: '这是一条有点黄的弹幕',
    color: '#ffff00'
  }
])
//

配置

弹幕机 - Player Config

// 下方值除 el 外均为该属性的默认值
const PlayerConfig = {
 
  // 弹幕机创建所需要的 DOM 节点，可以传递字符串选择器或者是具体的 DOM 对象
  el: '#app',
  
  // 每条弹幕运动的总时长，单位为毫秒
  rollingTime: 6000,
  
  // 弹幕节点的 DOM 标签，大小写不敏感
  nodeTag: 'p',
  
  // 弹幕节点的类名，可通过这里修改弹幕的样式
  nodeClass: 'awesome-danmaku-item',
  
  // 弹幕节点的最大值，该值设置过大可能会影响运行性能
  nodeMaxCount: 25,
  
  // 传入弹幕机的节点文本key，通常不设为空，为空时默认为'text'
  nodeValueKey: 'value',
  
  // 弹幕机轨道数
  trackCount: 5,
  
  // 弹幕机轨道高度，单位为 px
  trackHeight: 40,
  
  // 弹幕机的节点列表，可传入弹幕节点
  list: [] 
}

弹幕节点 - Node Config

const nodeConfig = {
  // 弹幕文本，该枚举 key 可根据弹幕机 nodeValueKey 调整
  text: '',
  
  // 弹幕字体大小，为数字时单位为px，其他单位可通过字符串传递
  fontSize: 22,
  
  // 弹幕字体
  fontFamily: 'SimHei',
  
  // 弹幕字重
  fontWeight: 'normal',
  
  // 不透明度
  opacity: 1,
  
  // 弹幕字体颜色
  color: '#FFFFFF',
  
  // 弹幕速度系数，取值范围(>0)，标准为1
  speed: 1,
  
  // 弹幕节点的 DOM 类名，可以是数组形式
  nodeClass: ''
}

版本更新

v1.4.4

• 根视图委派弹幕节点事件，减少不必要的事件
• 弹幕轨道更新为 RAF 驱动本身的发射任务
• Fixed 插入弹幕元素可能产生的错误

v1.4.2

• 减少部分弹幕可能产生的不必要回流行为
• 优化弹幕文本宽度计算过程

v1.4.1

• 提高样式的切换效率
• 文本由 textContent 实现，原为 innerText

v1.3.4

• 原有的 control 命名空间下的所有 API 移入 AwesomeDanmaku 下，并移除 control 模块
• 更新补充文档

v1.3.1

• player#insert(string | config [, sync])
  现在使用 insert() 插入弹幕时，可添加第二个参数，将发送弹幕立即显示

v1.3.0

• 使用 window.requestAnimationFrame 代替了原有的队列定时器逻辑