rc-bullets是一个基于CSS3Aimatio，使用React构建的可扩展、高性能弹幕组件。
特性支持传入React组件，灵活控制弹幕内容和UI，并提供一个默认样式组件：<StyledBullet/>弹幕屏幕管理：清屏，暂停，隐藏（后续可能会加入针对单个弹幕的控制）弹幕动画参数化：运动函数（匀速/ease/步进/cubic-bezier）、时长（秒）、循环次数、延迟等鼠标悬浮弹幕暂停常用API初始化弹幕屏幕：costscree=ewBulletScree(<queryStrig>|<HTMLElemet>,[<optio>])，此处的optio和下面的一致，偏向全局初始化，没有则使用默认值，每次发送弹幕不传则使用默认或全局设置，传了则该条弹幕覆盖全局设置。发送弹幕：costbulletId=scree.push(<strig>|<ReactElemet>,[<optio>])optio：
选项含义值类型默认值备注top弹幕位置strigudefied自已强制定制距离顶部的高度，格式同CSS中的toptrackHeight轨道高度strig50px均分轨道的高度oStart自定义动画开始函数fuctioulle.g.(bulletId,scree)=>{//dosomethig}可以自定义一些动作，比如播放某个音效，在特定时间暂停该弹幕：scree.pause(bulletId)oEd自定义动画结束函数fuctioulle.g.(bulletId,scree)=>{//dosomethig}可以自定义一些动作，比如播放某个音效pauseOClick鼠标点击暂停booleafalse再次点击继续pauseOHover鼠标悬停暂停booleatrue鼠标进入暂停，离开继续loopCout循环次数umber/strig1值为‘ifiite’时，表示无限循环duratio滚动时长umber/strig10数字则单位为‘秒’，字符串则支持'10s'和'300ms'两种单位delay延迟umber/strig0数字则单位为‘秒’，字符串则支持'10s'和'300ms'两种单位directio动画方向strigormalaimatio-directio支持的所有值aimateTimeFu动画函数strigliear:匀速aimatio-timig-fuctio支持的所有值弹幕清屏：scree.clear([<bulletId>])，无参则清除全部暂停弹幕：scree.pause([<bulletId>])，无参则暂停全部弹幕继续：scree.resume([<bulletId>])，无参则继续全部隐藏弹幕（滚动继续）：scree.hide([<bulletId>])，无参则隐藏全部显示弹幕：scree.show([<bulletId>])，无参则显示全部自带的一个弹幕样式组件：<StyledBulletmsg="<弹幕内容>"head="<头像地址>"color="<字体颜色>"backgroudColor="<背景色>"size="<尺寸:small|ormal|large|huge|自定义大小,基于em机制，默认ormal>
评论