MFuns 高级弹幕引擎

MF-ADE (MFuns Advanced Danmaku Engine) 高级弹幕引擎

特性

经支持以下弹幕效果:

• 贝塞尔曲线
• 静止放置
• 3d 移动
• 3d 旋转
• 缩放
• 并行动画
• 串行动画
• 重复动画
• 透明度动画
• 图片弹幕
• 滤镜
• 渐变
• 大部分 CSS 属性
• 模板继承
• mode7+ 弹幕 更多的效果还在不断的添加和完善中

如果使用过程中存在 bug ,欢迎提交 issue 反馈

当前版本: 1.8.0 Beta ，更新日期：2021/9/12

弹幕实验室

弹幕实验室目前已经搭建完成 地址: https://labv2.meogirl.ml

使用文档

下载 & 安装

下载 lib/mfunsAdvancedDanmaku.js 文件 使用 script 标记导入到 html 中

npm 方式：

从 1.5.5 版本开始 弹幕引擎已支持 使用 npm 安装 安装

npm install mf-ade --save

导入

import { MFADE } from "mf-ade";

基本使用

导入弹幕模块，并进行实例化的操作

// var danmaku = new MfunsDanMaku({  //从1.4.0版本开始 此名称已被废弃
var danmaku = new MFADE({
  //挂载的容器，要求传入一个HTMLElement对象，详见“容器”
  containers: document.getElementById("danmaku"),
  //获取弹幕的接口，详见“弹幕接口”
  // 1.8.0 之后，以下接口已废弃
  // danmaku: (send) => {
  //   /*
  //       获取弹幕,调用回调函数，将弹幕数组传进去
  //       */
  //   send(["json....", "json...."]);
  // },

  // 1.8.0 版 json 代码编辑器弹幕
  codeDanmaku: (send) => {
    send(["json....", "json...."]);
  },
  // 1.8.0 版 mode7+ 弹幕
  mode7Danmaku: (send) => {
    send(["json....", "json...."]);
  },
});

容器

containers 容器接受一个 html 元素,但并不会对元素的大小和位置进行设置，所以需要在外部完成对元素进行大小以及位置的设置

弹幕接口

由于弹幕引擎为了更好的可扩展性，内部并无任何网络请求的实现， 所以需要在这里进行相应的操作，获取弹幕当获取弹幕完成，调用 send(string[]) 回调函数，由于弹幕可能有很多条，所以回调函数接受一个 json 字符串数组

1.8.0 之后新增mode7+ 弹幕接口被拆分成两个

• codeDanmaku:(send)=>void: 原danmaku:(send)=>void 接口更名
• mode7Danmaku:(send)=>void: mode7+ 弹幕接口

弹幕引擎的控制方法

pause()

暂停弹幕

start()

开始播放

注意：如果获取弹幕进行使用网络进行异步请求，当网络缓慢时，弹幕极有可能没有加载完成，如果此时调用播放，那么弹幕将不会被加载

skip(time:number)

跳转到指定位置，该方法要求传入一个单位为毫秒的数字

time():number

获取弹幕引擎的内部时间，返回一个单位为毫秒的数字

reset()

重置弹幕引擎

该操作会重新调用初始化传入的danmaku接口，如果接口中存在网络请求，当网络请求缓慢，可能会发生一些意想不到的 BUG

如果不希望重新获取弹幕，请使用 skip(0) 进行跳转

resize()

重新计算弹幕容器尺寸

一般情况下，浏览器窗口大小变化时，会自动更新尺寸

但是也存在一些边缘情况导致舞台尺寸无法正常更新，请调用此函数

listenerEvent(event: DanmakuEventType, callback: (data:any) => void)

1.5.0 更新 监听弹幕事件

• event 事件类型

目前已有的事件类型

/**
 * 弹幕字符串无效
 */
(DANMAKU_JSON_INVALID = "DANMAKU_JSON_INVALID"),
  /**
   * 单条弹幕格式错误
   */
  (DANMAKU_FORMAT_ERROR = "DANMAKU_FORMAT_ERROR"),
  /**
   * 弹幕开始加载
   */
  (DANMAKU_LOAD_START = "DANMAKU_LOAD_START"),
  /**
   * 弹幕加载完成
   */
  (DANMAKU_LOAD_DONE = "DANMAKU_LOAD_DONE"),
  /**
   * 弹幕舞台重置
   */
  (DANMAKU_STAGE_RESET = "DANMAKU_STAGE_RESET");

• callback 回调函数

mode7+ 接收弹幕格式

[
  {
  "content":"string",//弹幕内
  "start":0,//开始时间
  "size":100,//文字大小
  "color":"#ffffffff",//文字颜色
  "weight":400,//文本粗细
  "shadow":true,//阴影
  "stroke":1,//描边
  "strokeColor":"#fffffff",//描边颜色
  "font":"string",//字体
  "zIndex":1,//层级,
  "linear":false,//线性动画 false时为加速动画
  "animations":[//动画关键帧
    {
      "duration":1000,//动画时间
      "x":0,//x
      "y":0,//y
      "opacity":0,//透明
      "rx":0,//旋转 x,y,z
      "ry":0,
      "rz":0,
      "scale":1//缩放
    },
    ....
  ]
}
]

相关链接

• 弹幕文档
• 弹幕实验室 [已停止维护]
• 弹幕实验室 v2

未实现清单

• 路径动画 offset-path
• svg 属性变换动画
• 内容遮罩
• 滤镜和渐变动画