代码拉取完成,页面将自动刷新
同步操作将从 逆流鱼/rc-bullets 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
🌈基于 CSS3 Animation,使用 React 构建,可扩展,高性能。
👉zerosoul.github.io/rc-bullets/
npm install --save rc-bullets
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>
);
}
<StyledBullet/>
const screen = new BulletScreen(<queryString>|<HTMLElement>,[<option>])
,此处的option
和下面的一致,偏向全局初始化,没有则使用默认值,每次发送弹幕不传则使用默认或全局设置,传了则该条弹幕覆盖全局设置。const bulletId = screen.push(<string>|<ReactElement>,[<option>])
option
:
选项 | 含义 | 值类型 | 默认值 | 备注 |
---|---|---|---|---|
top | 弹幕位置 | string | undefined | 自已强制定制距离顶部的高度,格式同CSS中的top |
trackHeight | 轨道高度 | string | 50px | 均分轨道的高度 |
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>">
useBulletScreen
git clone https://github.com/zerosoul/rc-bullets.git && cd rc-bullets
npm i && npm run start
cd example && npm i && npm run start
MIT © zerosoul
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。