react实现弹幕

最新推荐文章于 2024-09-14 07:10:28 发布

A公子是我偶像

最新推荐文章于 2024-09-14 07:10:28 发布

阅读量983

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端框架系列文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/liyu_ya/article/details/132339914

前端框架系列专栏收录该内容

10 篇文章

订阅专栏

本文介绍了基于 CSS3 Animation、使用 React 构建的可扩展、高性能弹幕组件 rc-bullets。它支持传入 React 组件，能灵活控制弹幕内容和 UI，还具备弹幕屏幕管理、动画参数化等特性。文中给出了下载方式，以及在 React 组件中使用该组件的相关操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bullets 基于 CSS3 Animation，使用 React 构建，可扩展，高性能

下载rc-bullets

yarn add rc-bullets

特性

支持传入 React 组件，灵活控制弹幕内容和 UI，并提供一个默认样式组件：<StyledBullet/>
弹幕屏幕管理：清屏，暂停，隐藏（后续可能会加入针对单个弹幕的控制）
弹幕动画参数化：运动函数（匀速/ease/步进/cubic-bezier）、时长（秒）、循环次数、延迟等
鼠标悬浮弹幕暂停

react组件中使用

import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';

const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
export default function Demo() {
  // 弹幕屏幕
  const [screen, setScreen] = useState(null);
  // 弹幕内容
  const [bullet, setBullet] = useState('');
  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
    let s = new BulletScreen('.screen',{duration:20});
    // or
    // let s=new BulletScreen(document.querySelector('.screen));
    setScreen(s);
  }, []);
  // 弹幕内容输入事件处理
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };
  // 发送弹幕
  const handleSend = () => {
    if (bullet) {
      // push 纯文本
      screen.push(bullet);
      // or 使用 StyledBullet

      screen.push(
        <StyledBullet
          head={headUrl}
          msg={bullet}
          backgroundColor={'#fff'}
          size='large'
        />
      );
      // or 还可以这样使用，效果等同使用 StyledBullet 组件
      screen.push({msg:bullet,head:headUrl,color:"#eee" size="large" backgroundColor:"rgba(2,2,2,.3)"})
    }
  };
  return (
    <main>
      <div className="screen" style={{ width: '100vw', height: '80vh' }}></div>
      <input value={bullet} onChange={handleChange} />
      <button onClick={handleSend}>发送</button>
    </main>
  );
}

初始化弹幕屏幕：const screen = new BulletScreen(<queryString>|<HTMLElement>,[<option>])，此处的option和下面的一致，偏向全局初始化，没有则使用默认值，每次发送弹幕不传则使用默认或全局设置，传了则该条弹幕覆盖全局设置。

发送弹幕：const bulletId = screen.push(<string>|<ReactElement>,[<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'两种单位
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>">