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