Como vocês estão, mestres do universo? Prontos para mais um tutorial massa para usar em seus projetos? Hoje vou ensinar como fazer um botão de menu utilizando um ícone SVG e adicionando uma animação ao mesmo. Enquanto escrevo vou ouvindo Creedence Clearwater Revival, fica a dica para vocês darem um play enquanto leem esse post. :)

Mas o que temos demais nesse botão? É o seguinte, em primeiro momento temos aquele botão clássico de menus com 3 linhas, mas quando clicamos nele, ele se transforma em um ícone de fechar com um efeito de transição show de bola. A animação é revertida quando você clica novamente. ele se transforma novamente ao seu estado inicial com as 3 linhas. Dê uma olhada no efeito:

Nesse tutorial vamos recriar esse feito usando SVG como dito anteriormente e uma nova biblioteca chamada Segment. Mas primeiro vamos fazer um planejamento, e em seguida, vamos apresentar a biblioteca Segment um pouco e em seguida vamos desenha e animar nosso ícone.

Introdução ao Segment

A principal ferramenta que vamos utilizar é a Segment e um pouco pouco de JavaScript para desenhar e animar nosso SVG. Para usar o Segment é bem fácil segue exemplo:

Se quiser saber mais sobre o Segment, clique aqui para ler a documentação dele no GitHub.

Criando nosso botão

Abaixo você consegue ver o esboço da nossa animação, e sua trajetoria. É relativamente simples.

Não vou me aprofundar no passa a passo do desenvolviemnto do HTML, segue abaixo nossa estrutura, não tem nenhum segredo, com qualquer conhecimento básico de HTML e CSS você irá entender bem.

Agora vamos adicionar CSS a nossa estrutura:

Animando

Com o código SVG pronto, nossa tarefa agora é descobrir ou adivinhar as funções de atenuação usados em cada seção da animação, e para conseguir uma sincronização adequada, sempre guiado pela GIF animado. Vamos ver como animar as barras superior e inferior do ícone. Em primeiro lugar, é preciso inicializar a biblioteca Segment para cada barra com os valores iniciais e finais. Como não temos as informações pre-definidas, apenas a animação visual do GIF, este é um processo de tentativa e erro até encontrar os valores corretos.

Com isso estamos prontos para animar, mantendo sempre o mesmo comprimento (final - inicio = 24) durante todo a animação. Analisando a sequência de animação, podemos ver que a primeira parte começa com uma função de atenuação linear, e termina com um um elástico. Nós estaremos usando funções que recebem a biblioteca Segment como um parâmetro para reutilizar a mesma função com as barras superiores e inferiores, porque eles vão ser animadas da mesma forma.

Apenas precisamos repetir o mesmo processo para a barra do meio:

Para inverter a animação quando você clica no "X" e volta para o ícone do menu vamos utilizar:

Finalmente, a fim de realizar a respectiva animação com a ação de um clique, podemos fazer algo assim:

A animação está completa, mas há um pequeno problema. Ele não se parece exatamente o mesmo em todos os navegadores. Os comprimentos de trajeto parecem ser calculados ligeiramente diferentes e por isso há um pequeno (mas significativo) diferença, principalmente entre Firefox e Chrome. Como podemos corrigir isso?

A solução é bastante simples. Nós podemos simplesmente fazer o nosso SVG maior, em seguida, redimensionar ou reduzir as dimensões desejadas. Neste caso temos redimensionada nosso desenho SVG para ser 10 vezes maior do que antes, por isso temos o seguinte código:

Então nós reduzimos para as dimensões originais com CSS:

Essa é uma das possibilidades de fazer esse efeito existem diversas outras formas de realizar esse efeito, existem inumeras possibilidades com a biblioteca Segment.

Espero que tenham gostado, qualquer dúvida escravam ai nos comentários que estarei tentando responder a todos. ;)

Então a gente fica por aqui e ate o proximo tutorial pessoal.

<div id="como-conseguir-mais-orcamentos-com-o-seu-site-8e3a431d83adb2abbb57"></div>
<script type="text/javascript" src="https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js"></script>
<script type="text/javascript">
  new RDStationForms('como-conseguir-mais-orcamentos-com-o-seu-site-8e3a431d83adb2abbb57-html', 'UA-45918016-1').createForm();
</script>