rc-bullets React 弹幕组件

程序名称：rc-bullets

授权协议: MIT

操作系统: 跨平台

开发语言: JavaScript

rc-bullets 介绍

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](https://developer.mozilla.org/en- US/docs/Web/CSS/animation-direction)支持的所有值
animateTimeFun	动画函数	string	linear:匀速	[animation-timing-function](https://developer.mozilla.org/en- US/docs/Web/CSS/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>

rc-bullets 官网

http://zerosoul.github.io/rc-bullets