{"id":13789296,"url":"https://github.com/zerosoul/rc-bullets","last_synced_at":"2025-05-16T06:07:34.675Z","repository":{"id":45214033,"uuid":"223140010","full_name":"zerosoul/rc-bullets","owner":"zerosoul","description":"🌈基于CSS3 Animation，使用React构建的弹幕组件","archived":false,"fork":false,"pushed_at":"2024-01-07T06:54:48.000Z","size":14591,"stargazers_count":591,"open_issues_count":12,"forks_count":69,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T15:08:22.378Z","etag":null,"topics":["barrage","bullet","css3","css3-animations","danmu","danmu-barrage","react"],"latest_commit_sha":null,"homepage":"https://zerosoul.github.io/rc-bullets/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerosoul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-11-21T09:43:43.000Z","updated_at":"2025-03-12T12:49:40.000Z","dependencies_parsed_at":"2024-01-19T17:12:23.572Z","dependency_job_id":null,"html_url":"https://github.com/zerosoul/rc-bullets","commit_stats":{"total_commits":130,"total_committers":2,"mean_commits":65.0,"dds":0.007692307692307665,"last_synced_commit":"a4f35ad501e5f63b485efdc427b7f45d0e681771"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerosoul%2Frc-bullets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerosoul%2Frc-bullets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerosoul%2Frc-bullets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerosoul%2Frc-bullets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerosoul","download_url":"https://codeload.github.com/zerosoul/rc-bullets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478193,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barrage","bullet","css3","css3-animations","danmu","danmu-barrage","react"],"created_at":"2024-08-03T21:01:01.230Z","updated_at":"2025-05-16T06:07:29.662Z","avatar_url":"https://github.com/zerosoul.png","language":"JavaScript","readme":"# React 弹幕\n\n\u003e 🌈 基于 CSS3 Animation，使用 React 构建，可扩展，高性能。\n\n\u003e ⚠️ 该类库已基本不维护，如有迭代需求，请移步TS版本：https://github.com/slatejack/rc-bullets-ts\n\n[![NPM](https://img.shields.io/npm/v/rc-bullets.svg)](https://www.npmjs.com/package/rc-bullets) [![NPM downloads](https://img.shields.io/npm/dm/rc-bullets.svg)](http://npmjs.com/package/rc-bullets) [![twitter](https://img.shields.io/twitter/follow/wsygc?style=social)](https://twitter.com/wsygc)\n\n## 演示地址\n\n👉[zerosoul.github.io/rc-bullets/](https://zerosoul.github.io/rc-bullets/)\n\n![demo gif](demo.gif)\n\n## 安装\n\nnpm:\n\n```bash\nnpm install --save rc-bullets\n```\n\nyarn:\n\n```bash\nyarn add rc-bullets\n```\n\n## 初始化一个简单的弹幕场景\n\n```jsx\nimport React, { useEffect, useState } from 'react';\nimport BulletScreen, { StyledBullet } from 'rc-bullets';\n\nconst headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';\nexport default function Demo() {\n  // 弹幕屏幕\n  const [screen, setScreen] = useState(null);\n  // 弹幕内容\n  const [bullet, setBullet] = useState('');\n  useEffect(() =\u003e {\n    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效\n    let s = new BulletScreen('.screen',{duration:20});\n    // or\n    // let s=new BulletScreen(document.querySelector('.screen));\n    setScreen(s);\n  }, []);\n  // 弹幕内容输入事件处理\n  const handleChange = ({ target: { value } }) =\u003e {\n    setBullet(value);\n  };\n  // 发送弹幕\n  const handleSend = () =\u003e {\n    if (bullet) {\n      // push 纯文本\n      screen.push(bullet);\n      // or 使用 StyledBullet\n\n      screen.push(\n        \u003cStyledBullet\n          head={headUrl}\n          msg={bullet}\n          backgroundColor={'#fff'}\n          size='large'\n        /\u003e\n      );\n      // or 还可以这样使用，效果等同使用 StyledBullet 组件\n      screen.push({msg:bullet,head:headUrl,color:\"#eee\" size=\"large\" backgroundColor:\"rgba(2,2,2,.3)\"})\n    }\n  };\n  return (\n    \u003cmain\u003e\n      \u003cdiv className=\"screen\" style={{ width: '100vw', height: '80vh' }}\u003e\u003c/div\u003e\n      \u003cinput value={bullet} onChange={handleChange} /\u003e\n      \u003cbutton onClick={handleSend}\u003e发送\u003c/button\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n## 特性\n\n- 支持传入 React 组件，灵活控制弹幕内容和 UI，并提供一个默认样式组件：`\u003cStyledBullet/\u003e`\n- 弹幕屏幕管理：清屏，暂停，隐藏（后续可能会加入针对单个弹幕的控制）\n- 弹幕动画参数化：运动函数（匀速/ease/步进/cubic-bezier）、时长（秒）、循环次数、延迟等\n- 鼠标悬浮弹幕暂停\n\n## 常用 API\n\n- 初始化弹幕屏幕：`const screen = new BulletScreen(\u003cqueryString\u003e|\u003cHTMLElement\u003e,[\u003coption\u003e])`，此处的`option`和下面的一致，偏向全局初始化，没有则使用默认值，每次发送弹幕不传则使用默认或全局设置，传了则该条弹幕覆盖全局设置。\n- 发送弹幕：`const bulletId = screen.push(\u003cstring\u003e|\u003cReactElement\u003e,[\u003coption\u003e])`\n\n`option`：\n\n| 选项           | 含义               | 值类型        | 默认值      | 备注                                                                                                                      |\n| -------------- | ------------------ | ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- |\n| top            | 弹幕位置           | string        | undefined   | 自已强制定制距离顶部的高度，格式同 CSS 中的 top                                                                           |\n| trackHeight    | 轨道高度           | number        | 50          | 均分轨道的高度                                                                                                            |\n| onStart        | 自定义动画开始函数 | function      | null        | e.g.(bulletId,screen)=\u003e{//do something}可以自定义一些动作，比如播放某个音效，在特定时间暂停该弹幕：screen.pause(bulletId) |\n| onEnd          | 自定义动画结束函数 | function      | null        | e.g.(bulletId,screen)=\u003e{//do something}可以自定义一些动作，比如播放某个音效                                               |\n| pauseOnClick   | 鼠标点击暂停       | boolean       | false       | 再次点击继续                                                                                                              |\n| pauseOnHover   | 鼠标悬停暂停       | boolean       | true        | 鼠标进入暂停，离开继续                                                                                                    |\n| loopCount      | 循环次数           | number/string | 1           | 值为‘infinite’时，表示无限循环                                                                                            |\n| duration       | 滚动时长           | number/string | 10          | 数字则单位为‘秒’，字符串则支持'10s'和'300ms'两种单位                                                                      |\n| delay          | 延迟               | number/string | 0           | 数字则单位为‘秒’，字符串则支持'10s'和'300ms'两种单位                                                                      | [animation-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)支持的所有值 |\n| direction      | 动画方向           | string        | normal      | [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)支持的所有值                   |\n| animateTimeFun | 动画函数           | string        | linear:匀速 | [animation-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)支持的所有值       |\n\n- 弹幕清屏：`screen.clear([\u003cbulletId\u003e])`，无参则清除全部\n- 暂停弹幕：`screen.pause([\u003cbulletId\u003e])`，无参则暂停全部\n- 弹幕继续：`screen.resume([\u003cbulletId\u003e])`，无参则继续全部\n- 隐藏弹幕（滚动继续）：`screen.hide([\u003cbulletId\u003e])`，无参则隐藏全部\n- 显示弹幕：`screen.show([\u003cbulletId\u003e])`，无参则显示全部\n- 自带的一个弹幕样式组件：`\u003cStyledBullet msg=\"\u003c弹幕内容\u003e\" head=\"\u003c头像地址\u003e\" color=\"\u003c字体颜色\u003e\" backgroundColor=\"\u003c背景色\u003e\" size=\"\u003c尺寸:small|normal|large|huge|自定义大小,基于em机制，默认normal\u003e\"\u003e`\n\n## TO DO\n\n- ~~弹幕过多时，防重叠处理~~\n- react hooks 版本：`useBulletScreen`\n\n## 自己动手，丰衣足食\n\n### 克隆项目\n\n`git clone https://github.com/zerosoul/rc-bullets.git \u0026\u0026 cd rc-bullets`\n\n### 本地类库构建\n\n`npm i \u0026\u0026 npm run start`\n\n### 本地 demo\n\n`cd example \u0026\u0026 npm i \u0026\u0026 npm run start`\n\n## 支持\n\n![赞赏码](example/src/assets/img/reward.jpg)\n\n## License\n\nMIT © [zerosoul](https://github.com/zerosoul)\n","funding_links":[],"categories":["React"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerosoul%2Frc-bullets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerosoul%2Frc-bullets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerosoul%2Frc-bullets/lists"}