Barrage for MiniProgram

The small program bounce component. W hen you move the impeachment over the native component with the transform of view, make sure that the component is completely layered. Refer to the use case

How to use it

1. npm installation

npm install --save miniprogram-barrage

1. JSON component declaration

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

1. wxml introduces the impeachment component

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

1. js gets the instance

 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)
  }
 })

Configuration

Barrage default configuration

{
  duration: 10, // 弹幕动画时长 (移动 2000px 所需时长)
  lineHeight: 1.2, // 弹幕行高
  padding: [0, 0, 0, 0], // 弹幕区四周留白
  alpha: 1, // 全局透明度
  font: '10px sans-serif', // 全局字体
  mode: 'separate', // 弹幕重叠 overlap  不重叠 separate
  range: [0, 1], // 弹幕显示的垂直范围，支持两个值。[0,1]表示弹幕整个随机分布，
  tunnelShow: false, // 显示轨道线
  tunnelMaxNum: 30, // 隧道最大缓冲长度
  maxLength: 30, // 弹幕最大字节长度，汉字算双字节
  safeGap: 4, // 发送时的安全间隔
  enableTap: false, // 点击弹幕停止动画高亮显示
}

Impeachment data configuration

{
  color: '#000000', // 默认黑色
  content: '', // 弹幕内容
  image: {
    head: {src, width, height}, // 弹幕头部添加图片
    tail: {src, width, height}, // 弹幕尾部添加图片
    gap: 4 // 图片与文本间隔
  }
  
}

Interface

barrage.open() // 开启弹幕功能
barrage.close() // 关闭弹幕功能，清空弹幕
barrage.addData() // 添加弹幕数据
barrage.setRange() // 设置垂直方向显示范围
barrage.setFont() // 设置全局字体
barrage.setAlpha() // 设置全局透明度
barrage.showTunnel() // 显示弹幕轨道
barrage.hideTunnel() // 隐藏弹幕轨道

Description

1. When you implement the impeachment component with canvas, the animation is not smooth enough for the low-version base because of the missing raf interface.
2. 2.9.0 A new canvas interface for small programs replaces the implementation of view.