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+ 弹幕接口
暂停弹幕
开始播放
注意:如果获取弹幕进行使用网络进行异步请求,当网络缓慢时,弹幕极有可能没有加载完成,如果此时调用播放,那么弹幕将不会被加载
跳转到指定位置,该方法要求传入一个单位为毫秒的数字
获取弹幕引擎的内部时间,返回一个单位为毫秒的数字
重置弹幕引擎
该操作会重新调用初始化传入的
danmaku
接口,如果接口中存在网络请求,当网络请求缓慢,可能会发生一些意想不到的 BUG
如果不希望重新获取弹幕,请使用
skip(0)
进行跳转
重新计算弹幕容器尺寸
一般情况下,浏览器窗口大小变化时,会自动更新尺寸
但是也存在一些边缘情况导致舞台尺寸无法正常更新,请调用此函数
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 回调函数
[
{
"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//缩放
},
....
]
}
]
- 路径动画 offset-path
- svg 属性变换动画
- 内容遮罩
- 滤镜和渐变动画