Python戦闘コミュニティ
Java戦闘コミュニティ
長押しして以下のQRコードを特定し、必要に応じて追加します
QRコードをスキャンして、カスタマーサービスを追加します
Pythonコミュニティに参加する▲
QRコードをスキャンして、カスタマーサービスを追加します
Javaコミュニティに参加する▲
オープンソースの最前線（ID：OpenSourceTop）ApeMeiコンパイル
統合元：https：//github.com/zerosoul/rc-bullets
ステーションBと言えば、最も特徴的な機能は弾幕です。現在、弾幕は主要なビデオWebサイトの標準機能になっています。実際、弾幕は日本の2次元Webサイトであるニコニコで最初に生まれました。その後、ステーションAとステーションBがそれを導入し、国内の弾幕文化の先駆けとなりました。
いいね、再投稿、コメントと比較して、弾幕の形式はユーザーをよりインタラクティブにし、したがってより人気があります。多くの人々は、ビデオを見ているときに弾幕を開く習慣を身につけています。
プログラマーが自分で弾幕機能を実装するのは難しいでしょうか？誰かがすでにGithub-rc-bulletsで作成しています。rc-bulletsは、CSS3アニメーションに基づいており、Reactで構築された、拡張可能な高性能の弾丸スクリーンコンポーネントです。
rc-bulletsはGithubで331のスターが付けられており、累積ブランチは33です。（詳細：https：//github.com/zerosoul/rc-bullets）
rc-bulletsには次の特徴があります。
着信Reactコンポーネントをサポートし、弾丸画面のコンテンツとUIを柔軟に制御し、デフォルトのスタイルコンポーネントを提供します：<StyledBullet />
弾幕画面の管理：画面のクリア、一時停止、非表示（単一の弾幕の制御は後で追加される場合があります）
弾幕アニメーションのパラメーター化：モーション関数（均一な速度/容易さ/ステップ/キュービックベジエ）、持続時間（秒）、サイクル数、遅延など。
マウスホバー弾幕一時停止
次に弾幕効果を見てください：
設置方法
海抜 ：
npm install --save rc-bullets
糸：
yarn add 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>
);
}
程序员专栏 扫码关注填加客服 长按识别下方二维码进群
最近のおすすめのエキサイティングなコンテンツ：
エントリからソースコードまでのSringMVC、これで十分です
10個のPythonビジュアルアニメーション、注意深く美しく
ここで良い記事を見て、もっと多くの人と共有してください↓↓