Como animar sombras de caixa CSS e otimizar o desempenho

[ad_1]

Neste artigo, você aprenderá como animar sombras de caixa CSS sem reduzir o desempenho do navegador.

Em CSS, o box-shadow A propriedade é usada para adicionar sombras a elementos da web, e essas sombras podem ser animadas. No entanto, animações de sombra podem afetar o desempenho do navegador, causando atraso ao renderizar a página.

Este guia destina-se a desenvolvedores front-end com conhecimento prático de HTML e animação CSS.

Por que isso importa

Uma página da web precisa ter um tempo de carregamento muito curto, idealmente menos de cinco segundos. Pesquisas indicam que o carregamento rápido da página aumenta muito as taxas de conversão. Outras pesquisas indicam que 70% dos usuários dizem que a velocidade de um site afeta sua vontade de comprar em uma loja online. Basicamente, sites rápidos são iguais a usuários felizes.

Antes de prosseguirmos, aqui está uma demonstração de como box-shadow animações podem funcionar em uma página da web. Você pode percorrer e interagir com os elementos da web.

Veja a caneta
Elementos da Web com animação de sombra do SitePoint (@SitePoint)
no CodePen.

Três principais eventos de animação de sombra de caixa CSS

Por causa do que está acontecendo nos bastidores, a animação de sombra de caixa CSS pode consumir muitos recursos. Existem três processos principais, ou eventos, que são acionados durante a animação de sombra de caixa (ou qualquer forma de animação). Esses eventos são pintura, layout e composição.

Quadro. Na pintura, o navegador preenche os pixels com cor e box-shadow é uma das propriedades CSS que aciona este evento. Basicamente, ele cria uma nova sombra a cada quadro da animação. De acordo com a Mozilla, a animação CSS ideal deve rodar a 60fps.
Esquema. Algumas animações alteram a estrutura de uma página, o que pode levar a muitos recálculos de estilo. Um bom exemplo seria uma barra lateral empurrando outros elementos para fora do caminho ao expandir. As propriedades CSS que causam isso incluem padding, margin, border.

Simplificando, se a propriedade animada afetar outros elementos, ela alterará o layout da página, causando recálculos — o que consome muitos recursos do sistema.
Composição. Na composição, apenas partes da página mudam. Propriedades CSS como opacity e transform afetam apenas o elemento ao qual são aplicadas. Isso significa menos recálculos de estilo e animações mais suaves. A composição é o processo menos trabalhoso de todos os três.

Com a ferramenta de inspeção do seu navegador, você pode observar esse processo em tempo real. Primeiro, abra a ferramenta de inspeção (o Chrome é mostrado abaixo) e clique nos três pontos no canto superior direito da guia. Verificar Mais ferramentas e selecione Renderização.

A opção Pintar piscando escolhida na seção Renderização

Para este exemplo, Piscando a pintura é selecionado. Sempre que houver um evento de pintura, a tela piscará em verde:

A barra de navegação:
Os cartões de texto:
Os links de navegação:

Você verá que cada elemento com uma sombra pisca em verde quando você passa o mouse sobre ele ou quando atualiza a página. Você também pode fazer o mesmo experimento com layout: basta desmarcar Piscando a pintura e selecione Regiões de mudança de layout.

Observe que o flash de pintura pode não funcionar nas demonstrações do CodePen, então você deve tentar isso com uma visualização ao vivo de um editor de texto. O vídeo abaixo mostra o que você deve ver.

O objetivo é minimizar as alterações de pintura e layout, pois utilizam mais recursos do sistema.

Verificando o desempenho

Como desenvolvedor, você pode não ter nenhum problema ao executar animações de sombra porque tem um computador rápido. Mas você deve considerar usuários com PCs mais lentos e conexões de internet não confiáveis. Só porque fica bem no seu computador não significa que seja igual em qualquer outro lugar.

UMA box-shadow tem quatro valores e uma cor. Esses quatro valores são a posição horizontal da sombra (deslocamento x), posição vertical (deslocamento y), propagação e raio de desfoque, respectivamente. Uma animação de sombra típica envolverá uma alteração em um ou mais desses valores:

box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;

Vamos criar um simples box-shadow animação, começando com algum HTML:

<body>
  <div class="box"></div>
</body>

E aqui está algum CSS para a sombra inicial e final:

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

Aqui está o resultado:

Veja a caneta
Sombra de caixa animada por SitePoint (@SitePoint)
no CodePen.

Para a animação, estamos alterando os valores de y-offset, blur e spread. Também vamos com uma sombra final mais transparente.

Agora vamos dar uma olhada no que está acontecendo nos bastidores enquanto executamos este 0.5s animação. No seu navegador, abra as ferramentas do desenvolvedor clicando com o botão direito e selecionando Inspecionar. Uma vez que as ferramentas estão abertas, vá para o atuação aba. Você pode gravar a animação da sombra; apenas alguns segundos são suficientes para ver o que está acontecendo.

A captura de tela abaixo mostra o que você encontrará nas ferramentas de desenvolvimento do Chrome.

Dados de desempenho para nossa animação de sombra simples

O período de animação da sombra, passe o mouse para cima e para baixo, é destacado na parte superior, e um detalhamento dos processos que ocorre é exibido na parte inferior. O detalhamento mostra que o script leva 7 ms, a renderização leva 55 ms e a pintura dura 30 ms.

Agora, esses números parecem bons, mas o que acontece quando a CPU é quatro vezes mais lenta? Você pode acelerar a velocidade da sua CPU na guia de desempenho.

A imagem a seguir mostra o que acontece quando você executa a mesma animação com uma CPU mais lenta.

Dados de desempenho para a animação de sombra limitada

Neste novo processo, o carregamento leva 6ms. O script é de até 52ms, a renderização mais que dobrou para 117ms e a pintura agora é de 72ms.

Você também pode acelerar a velocidade da rede e tornar a CPU ainda mais lenta. As animações de sombra usam muitos recursos do sistema, e tentaremos tirar um pouco da carga.

É importante notar que o transform A propriedade desempenha um papel no desempenho da CPU. Mais sobre isso mais tarde.

Como manter o desempenho ideal

Se você precisar animar sombras em uma página da Web, vale a pena torná-las mais eficientes. Nesta seção, você aprenderá várias maneiras pelas quais as animações de sombra podem ser ajustadas para que o impacto no desempenho seja reduzido.

Abordaremos o seguinte:

animação de opacidade
tendo vários box-shadow camadas
animando um pseudo elemento
usando o transform propriedade

Animação de opacidade

Ao usar rgba cores, o canal alfa controla a opacidade. Alterar apenas o canal alfa ao animar sombras não será tão difícil para a CPU quanto alterar os valores de deslocamento e propagação da sombra.

.box {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box:hover {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
}
.box-2 {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.25);
}

Na primeira animação, apenas a opacidade da sombra está mudando, enquanto na segunda, o deslocamento y está mudando de 10px para 20pxe o spread está mudando de 20px para 40px.

E aqui está como eles se comportam, com uma desaceleração de 6x (para que você possa ver os gráficos de desempenho claramente), começando com a animação onde apenas a opacidade está mudando:

Dados do navegador mostrando o efeito de animar apenas a opacidade

Leva aproximadamente dois segundos para passar o mouse dentro e fora da caixa. Agora compare isso com a segunda animação de sombra.

Os efeitos da mudança de y-offset e spread

Novamente, dois segundos ligando e desligando, e há um aumento notável no tempo para todos os eventos. A pintura era de 96ms antes e agora dobrou para 187ms. A renderização, que faz parte da composição, também aumentou de 97ms para 178ms.

Assim, alterar apenas a opacidade da sombra produz uma animação mais performática.

Aqui está uma demonstração ao vivo dessas duas animações.

Veja a caneta
Opacidade animada versus deslocamentos animados pelo SitePoint (@SitePoint)
no CodePen.

Sombras em camadas

Se você observar as sombras ao redor de uma mesa, ou levantar um objeto acima dela, notará que sua região de sombra mais escura está mais próxima do objeto e se torna cada vez mais clara à medida que se espalha para fora.

Replicar este efeito não é fácil com um box-shadow. Sombras em camadas parecem muito melhores. Eles também produzem animações com melhor desempenho, mesmo com a camada de sombra adicionada.

Vamos comparar o desempenho de um único box-shadow e uma sombra de várias camadas:

.box {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box:hover {
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.25);
}

Esta animação tem 148ms de renderização e 133ms de pintura.

Resultados de desempenho de uma animação de sombra de caixa única

Agora vamos ter uma animação de sombra com dois box-shadow camadas:

.box-2 {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25),
              0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25),
              0px 20px 40px 0px rgba(0,0,0,0.15);
}

Resultados da animação de duas camadas de sombra de caixa

A diferença é clara. As sombras em camadas não apenas produzem efeitos de sombra com melhor aparência, como também têm um desempenho surpreendentemente melhor quando animados. A renderização foi reduzida de 148ms para 74ms, e a pintura também foi reduzida de 133ms para 74ms.

Aqui está uma demonstração ao vivo dos dois comparados.

Veja a caneta
Sombra única vs animação de sombra em camadas do SitePoint (@SitePoint)
no CodePen.

Agora, vamos tentar algo diferente, adicionando a segunda sombra durante a animação:

.box-2 {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  transition: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25),
              0px 20px 40px 0px rgba(0,0,0,0.15);
}

Resultados da adição de uma segunda camada de sombra

Adicionar uma segunda camada de sombra durante a animação não é tão eficiente quanto ter duas camadas desde o início, mas ainda tem 100 ms de pintura em comparação com 133 ms com o único box-shadow animação, o que é uma melhoria.

Em última análise, cabe a você decidir como sua sombra se parece e qual método você usará para criá-la.

Animando um pseudoelemento

Desta vez, vamos replicar a animação de sombra sem alterar o box-shadow propriedade. Nas demos anteriores, podemos ver que ainda há muita repintura durante a animação das sombras. Se você estiver alterando o box-shadow valores, você não pode evitar esse processo.

Você verá no final desta seção que a pintura será quase completamente eliminada. Isso envolverá mais linhas de código, mas obteremos animações de sombra com melhor desempenho.

Então, após o estilo básico da caixa, crie um :after pseudo elemento e dar-lhe um box-shadowque será o estado final da sombra após a animação:

.pseudo {
  position: relative;
  transition: box-shadow ease 0.5s, transform ease 0.5s;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
}
.pseudo::after{
  content: "";
  position: absolute;
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
  transition: opacity ease 0.5s;
}

Agora, tudo o que você precisa fazer é alterar o opacity do pseudo elemento em :hover:

.pseudo:hover{
  transform: translateY(-10px);
}
.pseudo:hover::after{
  opacity: 1;
}

Vamos olhar para ele ao lado de uma animação de sombra regular.

Veja a caneta
Psuedo Shadow por SitePoint (@SitePoint)
no CodePen.

Não há muito o que fazer visualmente aqui. A verdadeira diferença está em seu desempenho. Os resultados para o regular box-shadow animação são mostradas abaixo.

Resultados para a animação regular

Tem 230ms de tempo de renderização e 211ms para pintura. Agora a animação de pseudo sombra.

Resultados da animação de sombra do pseudo elemento

Desta vez, temos 148ms de renderização e apenas 51ms de pintura. Há mais código, mas o resultado vale a pena.

Usando o `transform` propriedade

Isso se aplica principalmente ao elemento principal, a caixa, que terá a sombra. Usando o transform propriedade, em vez de propriedades de mudança de layout como marginreduzirá a quantidade de recálculos de estilo.

Esta propriedade pode ser usada com o translate ou scale propriedades para simular o levantamento de um elemento da página, criando a ilusão de profundidade.

Algumas dicas úteis

Já está estabelecido que qualquer animação que envolva o box-shadow propriedade afetará o desempenho. Portanto, se você precisa ter uma animação de sombra de caixa CSS, aqui estão algumas dicas úteis a serem lembradas.

Primeiro, mantenha-os mínimos. Não jogue sombras em cada elemento por causa disso. Em segundo lugar, apenas anime os elementos interativos. Não há necessidade de animar nada que não tenha função. Isso reduzirá a carga de trabalho da CPU e melhorará muito o desempenho.

Conclusão

As sombras podem melhorar visualmente o seu site, mas também afetam o desempenho – especialmente quando se trata de animação. Neste artigo, testamos vários métodos de animação de sombras e comparamos seu desempenho. A animação de sombras aciona três eventos – pintura, alterações de layout e composição – sendo o primeiro o mais trabalhoso.

A solução ideal seria não animar sombras (já que elas parecem bem como estão!). Se você realmente deseja animar o box-shadow propriedade, alterar apenas a opacidade em vez de alterar os valores de deslocamento reduzirá a repintura. O problema é que você perderá a ilusão de profundidade que as sombras devem fornecer. Outra abordagem é animar dois box-shadow camadas. Esta solução é visualmente agradável e de alto desempenho, mesmo com a sombra extra.

A última opção é animar não o box-shadow mas um pseudo elemento que fornece uma sombra. Isso reduz drasticamente a quantidade de repintura e o trabalho geral que a CPU faz na execução da animação. Você escreverá mais código, mas é sua melhor aposta para garantir um bom desempenho.

Conteúdo Relacionado:

[ad_2]

Source link