Comunidade de combate Python
Comunidade de combate Java
Pressione e segure para identificar o código QR abaixo, adicione conforme necessário
Leia o código QR a seguir para adicionar atendimento ao cliente
Entre na comunidade Python ▲
Leia o código QR a seguir para adicionar atendimento ao cliente
Entre na comunidade Java ▲
A vanguarda do código aberto (ID: OpenSourceTop) Compilação Ape Mei
Integrado de: https://github.com/zerosoul/rc-bullets
Por falar na estação B, a característica mais marcante é a barragem. Agora a barragem se tornou um recurso padrão nos principais sites de vídeo. Na verdade, a barragem nasceu em Niconico, um site bidimensional no Japão. Mais tarde, a Estação A e a Estação B o introduziram, o que abriu um precedente para a cultura de barragem doméstica.
Em comparação com curtidas, repostagens e comentários, a forma de barragem torna os usuários mais interativos e, portanto, mais populares. Muitas pessoas desenvolveram o hábito de abrir barragem ao assistir a vídeos.
Seria difícil para os programadores implementar uma função de barragem por conta própria? Alguém já criou um no Github-rc-bullets. rc-bullets é um componente de tela com marcadores extensível e de alto desempenho baseado em animação CSS3 e construído com React.
rc-bullets foi marcado com 331 no Github e o branch cumulativo é 33 . (Detalhes: https://github.com/zerosoul/rc-bullets)
rc-bullets tem as seguintes características:
Oferece suporte a componentes React de entrada, controle flexível do conteúdo da tela de marcadores e da IU e fornece um componente de estilo padrão: <StyledBullet />
Gerenciamento da tela de barragem: limpar a tela, pausar, ocultar (o controle para uma única barragem pode ser adicionado posteriormente)
Parametrização da animação de barragem: função de movimento (velocidade uniforme / facilidade / passo / bézier cúbico), duração (segundos), número de ciclos, atraso, etc.
Pausa para pairar no mouse
A seguir, observe o efeito barragem:
Método de instalação
acima do nível do mar :
npm install --save rc-bullets
fio:
yarn add rc-bullets
Inicialize uma cena de barragem simples:
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>
);
}
程序员专栏 扫码关注填加客服 长按识别下方二维码进群
Conteúdo emocionante recente recomendado:
Comparação da renda do programador na China, Estados Unidos, Japão e Índia
Um dia triste para programadores
SringMVC da entrada ao código-fonte, este é o suficiente
10 animações visuais em Python, com cuidado e beleza
Assista ao bom artigo aqui para compartilhá-lo com mais pessoas ↓↓