rc-bulletsReact 弹幕组件
rc-bullets 是一个基于 CSS3 Animation,使用 React 构建的可扩展、高性能弹幕组件。
特性
- 支持传入 React 组件,灵活控制弹幕内容和 UI,并提供一个默认样式组件:
<StyledBullet/>
- 弹幕屏幕管理:清屏,暂停,隐藏(后续可能会加入针对单个弹幕的控制)
- 弹幕动画参数化:运动函数(匀速/ease/步进/cubic-bezier)、时长(秒)、循环次数、延迟等
- 鼠标悬浮弹幕暂停
常用 API
- 初始化弹幕屏幕:
const screen = new BulletScreen(<queryString>|<HTMLElement>,[<option>])
,此处的option
和下面的一致,偏向全局初始化,没有则使用默认值,每次发送弹幕不传则使用默认或全局设置,传了则该条弹幕覆盖全局设置。 - 发送弹幕:
const bulletId = screen.push(<string>|<ReactElement>,[<option>])
option
:
选项 | 含义 | 值类型 | 默认值 | 备注 |
---|---|---|---|---|
top | 弹幕位置 | string | undefined | 自已强制定制距离顶部的高度,格式同CSS中的top |
trackHeight | 轨道高度 | string | 50px | 均分轨道的高度 |
onStart | 自定义动画开始函数 | function | null | e.g.(bulletId,screen)=>{//do something}可以自定义一些动作,比如播放某个音效,在特定时间暂停该弹幕:screen.pause(bulletId) |
onEnd | 自定义动画结束函数 | function | null | e.g.(bulletId,screen)=>{//do something}可以自定义一些动作,比如播放某个音效 |
pauseOnClick | 鼠标点击暂停 | boolean | false | 再次点击继续 |
pauseOnHover | 鼠标悬停暂停 | boolean | true | 鼠标进入暂停,离开继续 |
loopCount | 循环次数 | number/string | 1 | 值为‘infinite’时,表示无限循环 |
duration | 滚动时长 | number/string | 10 | 数字则单位为‘秒’,字符串则支持'10s'和'300ms'两种单位 |
delay | 延迟 | number/string | 0 | 数字则单位为‘秒’,字符串则支持'10s'和'300ms'两种单位 |
direction | 动画方向 | string | normal | animation-direction支持的所有值 |
animateTimeFun | 动画函数 | string | linear:匀速 | animation-timing-function支持的所有值 |
- 弹幕清屏:
screen.clear([<bulletId>])
,无参则清除全部 - 暂停弹幕:
screen.pause([<bulletId>])
,无参则暂停全部 - 弹幕继续:
screen.resume([<bulletId>])
,无参则继续全部 - 隐藏弹幕(滚动继续):
screen.hide([<bulletId>])
,无参则隐藏全部 - 显示弹幕:
screen.show([<bulletId>])
,无参则显示全部 - 自带的一个弹幕样式组件:
<StyledBullet msg="<弹幕内容>" head="<头像地址>" color="<字体颜色>" backgroundColor="<背景色>" size="<尺寸:small|normal|large|huge|自定义大小,基于em机制,默认normal>
评论