slatejack/rc-bullets-ts

rc-bullets基于Typescript重构版

rc-bullets-ts

👏 基于 rc-bullets 库使用typescript结合webpack 进行重构，为后续项目开发提供更安全的类型支持与拓展性支持。感谢原作者：@zerosoul 提供支持
🌈 基于 CSS3 Animation，使用 React 构建，可扩展，高性能。
💻 原项目地址：https://github.com/zerosoul/rc-bullets

注意！

⚠️ 更新至v1.4.0版本后，支持使用resize()方法重新计算展示窗口尺寸及弹幕动画起始位置
⚠️ 更新至v1.1.1版本后，修复了之前版本中暂停全部弹幕后继续播放时可能导致轨道计算出错的问题
⚠️ 更新至v1.1.0版本后，修复了之前版本useBullentScreen拼写问题，由useBullentScreen -> useBulletScreen 感谢@hellohejinyu指出
⚠️ 如之前安装版本存在弹幕大面积重合及消失问题，请尝试升级npm库到最新版本。

体验

下载demo文件夹，运行npm install完成依赖安装后，执行npm run start即可体验项目

安装

npm:

npm install --save rc-bullets-ts

yarn:

yarn add rc-bullets-ts

初始化一个简单的弹幕场景

import BulletScreen, {StyledBullet} from 'rc-bullets-ts'
import {useEffect, useRef, useState} from 'react'

const headUrl =
  'https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg'

const Demo = () => {
  const screenElRef = useRef < HTMLDivElement > (null)
  const screenRef = useRef < InstanceType < typeof BulletScreen >> ()
  const [bullet, setBullet] = useState('')

  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
    screenRef.current = new BulletScreen(screenElRef.current, {duration: 20})
  }, [])

  return (
    <main>
      <div ref={screenElRef} style={{width: '100vw', height: '80vh'}}/>
      <input
        value={bullet}
        onChange={({target: {value}}) => {
          // 弹幕内容输入事件处理
          setBullet(value)
        }}
      />
      <button
        onClick={() => {
          // 发送弹幕
          if (bullet && screenRef.current) {
            // 纯文本调用形式
            screenRef.current.push(bullet)

            // StyledBullet 调用形式
            screenRef.current.push(
              <StyledBullet
                head={headUrl}
                msg={bullet}
                backgroundColor={'#fff'}
                size="large"
              />
            )

            // 对象调用形式
            screenRef.current.push({
              msg: bullet,
              head: headUrl,
              color: '#eee',
              size: 'large',
              backgroundColor: 'rgba(2, 2, 2, .3)',
            })
          }
        }}
      >
        发送
      </button>
    </main>
  )
}

export default Demo

特性

• 支持传入 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
bottom	弹幕距离容器底部位置	string	undefined	强制指定距离容器底部的高度，格式同 CSS 中的 bottom
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'两种单位
direction	动画方向	string	normal	animation-direction支持的所有值
animateTimeFun	动画函数	string	linear:匀速	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>">

TO DO

• ✅ react hook
• 暂时还未想好，欢迎提issues~

本地开发指引

1. git clone

    git clone https://github.com/slatejack/rc-bullets-ts

2. 安装依赖

    npm install

3. 测试环境

    npm run dev

4. 打包正式

    npm run build

License

MIT © slatejack

rc-bullets-ts's Issues

来个小程序版本

为什么暂停和继续播放后弹幕会变得只在固定轨道上播放

如图，在演示页面也可以复现

当设置自动生成弹幕时，浏览器切换到其它tab页时弹幕能正常生成但是不会移动，切换回来时弹幕挤在一排。

Describe the bug
关于issue #17 浏览器切换到其它tab页，过一会再切回来，最新接收到的弹幕直接一排排的渲染。这个问题还存在。

To Reproduce

useEffect(() => {
  const interval = setInterval(() => {
    if (index >= messages.length) return setIndex(0)

    screenRef.current?.push(
      <StyledBullet
        className={"select-none"}
        head={`${window.location.origin}/image/${messages[index].avatar}`}
        msg={messages[index].content}
        backgroundColor={'#fbfbfd'}
        size="large"
      />, {}
    );

    setIndex(index + 1)
  }, 2048);

  return () => clearInterval(interval);
}, [messages, index])

源码地址我的想法是利用setInterval函数每2秒向屏幕传递一个弹幕，但是当浏览器切换到其它tab页，过一会再切回来，弹幕是正常生成的但是不会移动而是停止在屏幕边缘。
测试网站 点开这个测试网站然后浏览器切换tab标签，过一会再切换回来。

Expected behavior
当浏览器切换其他tab页，弹幕能正常生成但是不能正常移动。
可能原因：浏览器切换标签后为了节省资源而暂停了某些动画的渲染。

Screenshots

作者你用 TS 重构完好歹导出个 d.ts 文件呀

不然 TS 的优势不就没有了嘛😭

能指定弹幕区域吗？

目前只有一个top值设置，是否可以加下bottom之类的设置半屏 全屏，顶部之类的？

切换到其它tab页，过一会再切回来，最新接收到的弹幕直接不渲染在页面上了，或者直接一排排的渲染样式

Describe the bug
切换到其它tab页，过一会再切回来，最新接收到的弹幕直接不渲染在页面上了，或者直接一排排的渲染样式

To Reproduce
Steps to reproduce the behavior:

1. 切换到其它tab页，过一会再切回来

Expected behavior
组件内部监听当容器屏幕尺寸大小改变或再次切回到当前tab的时候，重置下呢，
，或者提供一个类似resize()的api给到开发者自己去重置？

Screenshots
当容器屏幕尺寸大小改变或再次切回到当前tab的时候，目前发现的弹幕异常表现：

这个弹幕可以自定义形状颜色么 比如设置宽高 不想要阴影效果 也不想要边框

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.