{"repo":"zerosoul/rc-bullets","free":true,"listed":false,"github":"https://github.com/zerosoul/rc-bullets","clone":"git clone https://github.com/zerosoul/rc-bullets.git","description":"🌈基于CSS3 Animation，使用React构建的弹幕组件","language":"JavaScript","stars":595,"topics":["css3","css3-animations","react","barrage","bullet","danmu","danmu-barrage"],"license":null,"category":"ui-components","readme_excerpt":"React 弹幕 🌈 基于 CSS3 Animation，使用 React 构建，可扩展，高性能。 ⚠️ 该类库已基本不维护，如有迭代需求，请移步TS版本：https://github.com/slatejack/rc-bullets-ts 演示地址 👉zerosoul.github.io/rc-bullets/ 安装 npm: yarn: 初始化一个简单的弹幕场景 特性 - 支持传入 React 组件，灵活控制弹幕内容和 UI，并提供一个默认样式组件： - 弹幕屏幕管理：清屏，暂停，隐藏（后续可能会加入针对单个弹幕的控制） - 弹幕动画参数化：运动函数（匀速/ease/步进/cubic-bezier）、时长（秒）、循环次数、延迟等 - 鼠标悬浮弹幕暂停 常用 API - 初始化弹幕屏幕： const screen = new BulletScreen( ,[ ]) ，此处的 option 和下面的一致，偏向全局初始化，没有则使用默认值，每次发送弹幕不传则使用默认或全局设置，传了则该条弹幕覆盖全局设置。 - 发送弹幕： const bulletId = screen.push( ,[ ]) option ： 选项 含义 值类型 默认值 备注 -------------- ------------------ ------------- ----------- ------------------------------------------------------------------------------------------------------------------------- top 弹幕位置 string undefined 自已强制定制距离顶部的高度，格式同 CSS 中的 top trackHeight 轨道高度 number 50 均分轨道的高度 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'两种单位 animation-delay支持的所有值 direction 动画方向 string normal animation-direction支持的所有值 animateTimeFun 动画函数 string linear:匀速 animation-timing-function支持的所有值 - 弹幕清屏： screen.clear([ ]) ，无参则清除全部 - 暂停弹幕： screen.pause([ ]) ，无参则暂停全部 - 弹幕继续：","default_branch":null,"files":null,"tree":[],"storefront":"/r/zerosoul","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/zerosoul/rc-bullets/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}