Resumo dos métodos para implementar efeitos de barragem no front-end (incluindo métodos de implementação de css3 e canvas)

Anteriormente, em uma página de loteria móvel, a janela de exibição dos resultados da loteria precisava exibir um carrossel de barragens. Já passei por algumas armadilhas. Agora vou resumir como obter o efeito de barragem frontal.

• css3 implementa versão mendiga do barrage
• otimização de desempenho de barragem css3
• lona implementa barragem
• Funções estendidas de barragem de tela

Primeiro, vamos ver como implementar a barragem mais simples por meio de CSS:

Primeiro defina a estrutura dom de uma barragem em HTML:

 <div class=block>Eu sou Danmaku</div>

O movimento da barragem pode ser conseguido movendo este bloco tomando como exemplo a barragem movendo-se da direita para a esquerda, a posição inicial da barragem está no lado esquerdo do contêiner e está escondida ao longo da borda (o lado mais esquerdo do contêiner). a barragem é igual ao lado direito do container Fit), o que pode ser conseguido por posicionamento absoluto e transformação:

 .block{posição:absoluto;}

Posição inicial:

 de{esquerda:100%;transformar:translateX(0)}

A posição final do movimento para a extrema esquerda é (o lado direito da barragem está alinhado com o lado esquerdo do contêiner):

 para{ esquerda:0; transformar:translateX(-100%)}

As ilustrações específicas da posição inicial e da posição final são as seguintes:

Uma animação completa de barragem de dois quadros pode ser definida com base na posição inicial e na posição final:

 @keyframes barragem{ de{ esquerda:100%; transform:translateX(0 } para{ esquerda:0;

Apresente esta animação ao elemento barragem:

 .block{posição:absolute; /* outro estilo de decoração */ animação:barrage 5s linear 0s;}

Desta forma, uma versão mendiga do efeito barragem pode ser alcançada:

Primeiro, vamos esclarecer o processo de renderização do CSS

I) Gere uma árvore DOM com base na estrutura do HTML (a árvore DOM contém nós display:none) II) Com base na árvore DOM, gere uma árvore de renderização com base nos atributos geométricos dos nós (margem/preenchimento/largura/altura /esquerda, etc.) III) Continue a renderizar atributos como cor e fonte com base na árvore de renderização

Se as propriedades em I) e II) mudarem, ocorrerá refluxo. Se apenas as propriedades em III) mudarem, ocorrerá apenas repintura. Obviamente também podemos ver no processo de renderização CSS: o refluxo deve ser acompanhado de redesenho.

reflow: Quando parte ou toda a árvore de renderização muda devido ao tamanho, margens, etc., o processo precisa ser reconstruído. Repintar: Quando alguns atributos do elemento mudam, como a aparência e a cor de fundo, o layout não será. afetado O processo de nova renderização devido a alterações é chamado de redesenho.

O refluxo afetará a velocidade de renderização do CSS do navegador, portanto, ao otimizar o desempenho da página web, é necessário reduzir a ocorrência de refluxo.

Na primeira seção, usamos o atributo left para obter o efeito de barragem. Esquerda mudará o layout do elemento, então ocorrerá o refluxo, o que fará com que a animação da barragem congele na página móvel.

Descobrimos que a animação de barragem na primeira seção tem um problema travado. Vamos ver como resolver a animação travada.

Use CSS para ativar a aceleração de hardware no navegador e use a GPU (Unidade de Processamento Gráfico) para melhorar o desempenho da página web. Diante disso, podemos usar o poder da GPU para fazer com que nosso site ou aplicativo funcione com mais fluidez.

Animações, transformações e transições CSS não habilitam automaticamente a aceleração da GPU, mas são executadas pelo lento mecanismo de renderização de software do navegador. Então, como podemos mudar para o modo GPU? Muitos navegadores fornecem certas regras CSS acionadas.

A maneira mais comum é ativar a aceleração de hardware por meio de alterações 3D (atributo translate3d). Em vista disso, modificamos a animação como:

 @keyframes barragem{ de{ esquerda:100%; transform:translate3d(0,0,0 } para{ esquerda:0;

Dessa forma, você pode otimizar o desempenho da página da web ativando a aceleração de hardware. No entanto, este método não resolve fundamentalmente o problema. Ao mesmo tempo, o uso da GPU aumenta o uso de memória, o que reduzirá a vida útil da bateria do dispositivo móvel e assim por diante.

(2)Não altere o atributo esquerdo

O segundo método é encontrar uma maneira de não alterar o valor do atributo esquerdo antes e depois da animação da barragem, para que o refluxo não ocorra.

Queremos determinar a posição inicial do nó da barragem apenas por meio de translateX, mas o translateX(-100%) é relativo ao próprio nó da barragem, não ao elemento pai, então acoplamos js e css para obter a largura da barragem em js do elemento pai onde o nó está localizado, e então a posição inicial do nó barragem é definida com base na largura.

Tomemos por exemplo quando o elemento pai é body:

 //css .block{ posição:absolute; left:0; visibilidade:hidden; /* outro estilo de decoração */ animação:barrage 5s linear 0s;}//jslet style = document.createElement('style');document.head .appendChild(style);let width = window.innerWidth;let from = `from { visibilidade: visível -webkit-transform: traduzX(${width}px);let to = `to {visibilidade: visível; -webkit-transform: translateX(-100%);style.sheet.insertRule(`@-webkit-keyframes barrage { ${de} ${para} }`, 0);

Além de acoplar js para calcular a largura do elemento pai para determinar a posição inicial do nó barragem, para evitar que a posição inicial seja exibida no nó barragem, adicionamos o atributo visibilidade: oculto. Impedir que os nós de barragem sejam exibidos no contêiner pai antes que a posição inicial seja determinada. A barragem só ficará visível se começar a rolar a partir de sua posição inicial.

No entanto, este método de implementação CSS é mais problemático para realizar as funções estendidas da barragem, como controlar a pausa da barragem e assim por diante.

Além do método de realização de barragem por meio de CSS, a barragem também pode ser realizada por meio de canvas.

O princípio de realizar a barragem por meio da tela é redesenhar o texto de vez em quando. Vamos implementá-lo passo a passo.

Obter tela

 deixe tela = document.getElementById('canvas');

Desenhar texto

 ctx.font = '20px Microsoft YaHei';

O fillText acima é a API principal para obter o efeito de barragem, onde x representa a coordenada horizontal e y representa a coordenada vertical. Contanto que x e y sejam alterados de tempos em tempos e redesenhados, o efeito de barragem dinâmico pode ser alcançado. Copiar código

Limpar conteúdo do desenho

 ctx.clearRect(0, 0, largura, altura);

Através do cronômetro, x, y é alterado regularmente. Antes de cada alteração, a tela é limpa primeiro e depois redesenhada com base no x, y alterado. Quando houver múltiplas barragens, defina:

 let colorArr=_this.getColor(color); A matriz de cores correspondente à matriz de barragem let numArrL=_this.getLeft() A matriz de posição da coordenada x correspondente à matriz de barragem let numArrT=_this.getTop(); A matriz de posição da coordenada y correspondente permite speedArr=_this.getSpeed();

A função de barragem de redesenho programada é:

 _this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=velocidadeArr[j];ctx.fillStyle = colorArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]);

O efeito alcançado é:

O método de implementação de barragem por meio da tela é muito conveniente para funções estendidas, como pausar a rolagem da barragem. Além disso, você também pode adicionar avatares à barragem, adicionar bordas a cada barragem e outras funções, que serão adicionadas posteriormente.

Finalmente, forneça um componente simples de barragem de reação;

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.