Python combat community
Java combat community
Long press to identify the QR code below, add as required
Scan QR code to follow to add customer service
Enter the Python community▲
Scan QR code to follow to add customer service
Enter the Java community ▲
The forefront of open source (ID: OpenSourceTop) Ape Mei compilation
Integrated from: https://github.com/zerosoul/rc-bullets
Speaking of station B, the most distinctive feature is barrage. Now barrage has become a standard feature of major video websites. In fact, barrage was first born in Niconico, a two-dimensional website in Japan. Later, Station A and Station B introduced it, which opened a precedent for domestic barrage culture.
Compared with likes, reposts, and comments, the form of barrage makes users more interactive, so it is more popular with everyone. Many people have developed the habit of opening barrage when watching videos.
Would it be difficult for programmers to implement a barrage function by themselves? Someone has already created one on Github-rc-bullets. rc-bullets is an extensible, high-performance bullet screen component based on CSS3 Animation and built with React.
rc-bullets has been starred 331 on Github , and the cumulative branch is 33 . (Details: https://github.com/zerosoul/rc-bullets)
rc-bullets has the following characteristics:
Support incoming React components, flexibly control the bullet screen content and UI, and provide a default style component: <StyledBullet/>
Barrage screen management: clear screen, pause, hide (control for a single barrage may be added later)
Barrage animation parameterization: motion function (uniform speed/ease/step/cubic-bezier), duration (seconds), number of cycles, delay, etc.
Mouse hover barrage pause
Next look at the barrage effect:
Installation method
above sea level ：
npm install --save rc-bullets
yarn:
yarn add rc-bullets
Initialize a simple barrage scene:
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>
);
}
程序员专栏 扫码关注填加客服 长按识别下方二维码进群
Recommended recent exciting content:
Comparison of programmer income in China, the United States, Japan and India
SringMVC from entry to source code, this one is enough
10 Python visual animations, carefully and beautifully
Watch the good article here to share it with more people↓↓