微信小程序 擴展組件·小程序彈幕組件

Barrage for MiniProgram

小程序彈幕組件。通過 view 的 transform 移動彈幕，覆蓋在 原生組件上時，請確保組件已經(jīng)同層化。參考用例

使用方法

1. npm 安裝

npm install --save miniprogram-barrage

1. JSON 組件聲明

{
  "usingComponents": {
    "barrage": "miniprogram-barrage",
  }
}

1. wxml 引入彈幕組件

<video class="video" src="{{src}}">
  <barrage class="barrage"></barrage>
</video>

1. js 獲取實例

 Page({
  onReady() {
    this.addBarrage()
  },
  addBarrage() {
    const barrageComp = this.selectComponent('.barrage')
    this.barrage = barrageComp.getBarrageInstance({
      font: 'bold 16px sans-serif',
      duration: 10,
      lineHeight: 2,
      mode: 'separate',
      padding: [10, 0, 10, 0],
      tunnelShow: false
    })
    this.barrage.open()
    this.barrage.addData(data)
  }
 })

配置

Barrage 默認配置

{
  duration: 10, // 彈幕動畫時長 (移動 2000px 所需時長)
  lineHeight: 1.2, // 彈幕行高
  padding: [0, 0, 0, 0], // 彈幕區(qū)四周留白
  alpha: 1, // 全局透明度
  font: '10px sans-serif', // 全局字體
  mode: 'separate', // 彈幕重疊 overlap  不重疊 separate
  range: [0, 1], // 彈幕顯示的垂直范圍，支持兩個值。[0,1]表示彈幕整個隨機分布，
  tunnelShow: false, // 顯示軌道線
  tunnelMaxNum: 30, // 隧道最大緩沖長度
  maxLength: 30, // 彈幕最大字節(jié)長度，漢字算雙字節(jié)
  safeGap: 4, // 發(fā)送時的安全間隔
  enableTap: false, // 點擊彈幕停止動畫高亮顯示
}

彈幕數(shù)據(jù)配置

{
  color: '#000000', // 默認黑色
  content: '', // 彈幕內(nèi)容
  image: {
    head: {src, width, height}, // 彈幕頭部添加圖片
    tail: {src, width, height}, // 彈幕尾部添加圖片
    gap: 4 // 圖片與文本間隔
  }
  
}

接口

barrage.open() // 開啟彈幕功能
barrage.close() // 關閉彈幕功能，清空彈幕
barrage.addData() // 添加彈幕數(shù)據(jù)
barrage.setRange() // 設置垂直方向顯示范圍
barrage.setFont() // 設置全局字體
barrage.setAlpha() // 設置全局透明度
barrage.showTunnel() // 顯示彈幕軌道
barrage.hideTunnel() // 隱藏彈幕軌道

說明

1. 通過 canvas 實現(xiàn)彈幕組件時，對于低版本基礎庫由于缺失 raf 接口，動畫效果不夠流暢。
2. 2.9.0 起小程序新的 canvas 接口可替代 view 的實現(xiàn)。