Ver itens
R$ 0,00
Assistente
Nosso assistente ainda não chegou, mas já está quase, aguarde mais alguns dias.

Suas notificações

Animando um ícone de menu SVG

Tecnologias: CSS / HTML / JavaScript
Dificuldade: Avançado
Tempo estimado: 20 minutos

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.

Postado em

Comentários