Liberte o poder das animações de caminho com o SVGator

(Este é um artigo patrocinado.) No ano passado, uma introdução abrangente ao uso básico do SVGator foi publicada aqui na Smashing Magazine. Se você quiser aprender sobre os fundamentos do SVGator, configurar seus primeiros projetos e criar suas primeiras animações, recomendamos que você leia antes de continuar com este artigo.

Hoje, vamos dar uma segunda olhada para explorar alguns dos novos recursos que foram adicionados a ele nos últimos meses, incluindo o novíssimo Path Animator .

Observação : o Path Animator é um recurso premium do SVGator e não está disponível para usuários de avaliação. Durante um teste de sete dias, você pode ver como o Path Animator funciona no projeto de amostra que encontrará no aplicativo, mas não poderá aplicá-lo aos seus próprios SVGs, a menos que tenha optado por um projeto pago. plano. SVGator é um serviço baseado em assinatura. Atualmente, você pode escolher entre um plano mensal ($18USD/mês) e um plano anual ($144USD total, $12USD/mês). Para projetos mais longos, recomendamos que você considere a opção anual.

O Path Animator é apenas o primeiro dos recursos premium que o SVGator planeja lançar nos próximos meses. Todos os novos recursos estarão disponíveis para todos os usuários pagos, não importa quando eles se inscreveram.

O Encanto do Caminho Animações

As animações de caminho SVG não são uma novidade. Nos últimos anos, esta forma de enriquecer os gráficos vetoriais tem sido muito utilizada em toda a web:

As animações de caminho ganharam popularidade principalmente por causa de sua relativa simplicidade: embora possam parecer impressionantes e complexas à primeira vista, a regra subjacente é de fato muito simples.

Como funcionam as animações de caminho?

Você pode pensar que as animações de caminho SVG exigem algumas funções de desenho e transformação extremamente complicadas. Mas é muito mais simples do que parece. Para obter efeitos semelhantes ao exemplo acima, você não precisa gerar, desenhar ou animar os caminhos reais — você apenas anima seus traços. Esse conceito brilhante permite que você crie animações aparentemente complexas animando um único atributo SVG: stroke-dashoffset .

Animar esta pequena propriedade é responsável por todo o efeito. Depois de ter uma linha tracejada, você pode brincar com a posição dos traços e lacunas. Combine-o com as configurações corretas e isso lhe dará o efeito desejado de um caminho SVG auto-desenhado.

Se isso ainda soa um tanto misterioso ou você gostaria apenas de aprender sobre como as animações de caminho são feitas com mais detalhes, você encontrará alguns recursos úteis sobre esse tópico no final do artigo.

Não importa quão simples as animações de caminho sejam comparadas com sua aparência, não pense que codificá-las é sempre simples. À medida que seus arquivos ficam mais complicados, o mesmo acontece com a animação deles. E é aqui que o SVGator vem em socorro.

Além disso, às vezes você pode preferir não tocar em arquivos SVG brutos. Ou talvez você não goste muito de escrever código. Então o SVGator o protege. Com o novo Path Animator, você pode criar até mesmo as animações de caminho SVG mais complexas sem tocar em uma linha de código. Você também pode combinar a codificação com o uso do SVGator.

Para entender melhor as possibilidades que o Path Animator nos oferece, abordaremos três exemplos separados apresentando diferentes casos de uso de animações de caminho.

Exemplo nº 1: texto animado

No primeiro exemplo, vamos animar o texto, criando a impressão de letras auto-escritas.

Muito usado para lettering, esse efeito fofo também pode ser aplicado em outros elementos, como desenhos e ilustrações. Porém, há um problema: o elemento animado deve ser estilizado com traços em vez de preenchimentos. O que significa, para o nosso texto, que não podemos usar nenhuma fonte existente.

Delinear fontes, não importa quão finas, sempre resulta em formas fechadas em vez de caminhos abertos. Não há fontes regulares baseadas em linhas e traços.

Portanto, se quisermos animar texto usando animações de caminho, precisamos desenhá-lo nós mesmos (ou encontrar algumas letras vetoriais prontas adequadas para esse fim). Ao desenhar suas letras, sinta-se à vontade para usar alguma fonte ou tipografia existente como referência - mas não viole nenhum direito autoral! Apenas tenha em mente que não é possível usar fontes prontas para uso.

Preparando o arquivo

Em vez de começar com um tipo de letra existente, começaremos com um simples esboço desenhado à mão:

Agora é hora de redesenhar o esboço em uma ferramenta de design. Eu usei o Figma, mas você pode usar qualquer aplicativo que suporte exportações SVG, como Sketch, Adobe XD ou Adobe Illustrator.

Normalmente, começo com a ferramenta Caneta e sigo aproximadamente o esboço importado como uma camada abaixo:

Uma vez feito, removo o esboço do plano de fundo e refino os caminhos até ficar feliz com o resultado. Não importa quais ferramentas você use, nem técnica, o mais importante é preparar o desenho como linhas e usar apenas traços, sem preenchimentos.

Neste exemplo, temos quatro desses caminhos. A primeira é a letra “H”; a segunda são as três letras do meio “ell”; e “o” é o terceiro. O quarto caminho é a linha do ponto de exclamação.

O ponto de “!” é uma exceção — é a única camada que estilizaremos com um preenchimento, em vez de um traçado. Ele será animado de uma maneira diferente das outras camadas, sem usar o Path Animator.

Observe que todos os caminhos que vamos animar com o Path Animator estão abertos, exceto o “o”, que é uma elipse. Embora animar caminhos fechados (como elipses ou polígonos) com o Path Animator seja muito bom e factível, vale a pena torná-lo um caminho aberto também, porque essa é a maneira mais fácil de controlar exatamente onde a animação começa. Para este exemplo, adicionei uma pequena lacuna na elipse apenas no final da letra “l”, pois é onde você normalmente começa a escrever “o” na caligrafia.

Antes de importar nossas camadas para o SVGator, é melhor limpar a estrutura das camadas e renomeá-las de forma descritiva. Isso o ajudará a encontrar rapidamente o caminho para o arquivo depois de trabalhar no SVGator.

Se você quiser saber mais sobre como preparar suas formas para animações de caminho, recomendo que você confira este tutorial do SVGator.

Vale a pena preparar suas camadas com cuidado e pensar no futuro o máximo possível. No momento da escrita, no SVGator você não pode reimportar o arquivo para uma animação já existente. Durante a animação, se você descobrir um problema que exija alguma alteração no arquivo original, será necessário importá-lo novamente para o SVGator como um novo projeto e começar a trabalhar em sua animação do zero.

Criando uma animação

Quando estiver satisfeito com a estrutura e a nomenclatura de suas camadas, importe-as para o SVGator. Em seguida, adicione o primeiro caminho à linha do tempo e aplique o Path Animator a ele escolhendo-o na lista Animators ou pressionando Shift + T .

Para conseguir um efeito de auto-desenho, nosso objetivo é transformar o traçado do caminho em uma linha tracejada. O comprimento de um traço e uma lacuna deve ser igual ao comprimento de todo o caminho. Isso nos permite cobrir todo o caminho com uma lacuna para fazê-lo desaparecer. Uma vez oculto, altere stroke-dashoffset para o ponto em que todo o caminho é coberto por um traço.

O SVGator torna muito conveniente para nós fornecendo automaticamente o comprimento do caminho. Tudo o que precisamos fazer é copiá-lo com um clique e colá-lo nos dois parâmetros que o SVGator requer: Dashes e Offset . Colar o valor em Traços transforma o traço em uma linha tracejada. Você não pode vê-lo imediatamente, pois o primeiro traço da linha cobre todo o caminho. Definir o deslocamento alterará o deslocamento do stroke-dashoffset para que a lacuna cubra o caminho.

Uma vez feito isso, vamos criar uma animação adicionando um novo quadro-chave mais adiante na linha do tempo. Traga Offset de volta a zero e… ta-da! Você acabou de criar uma animação de letra auto-desenhada.

Há um pequeno problema com nossa animação, no entanto. A carta é animada – mas de trás para a frente. Ou seja, a animação começa na extremidade errada do caminho. Existem, pelo menos, algumas maneiras de corrigi-lo. Primeiro, em vez de animar o deslocamento de um valor positivo para zero, podemos começar com um deslocamento negativo e trazê-lo para zero. Infelizmente, isso pode não funcionar como esperado em alguns navegadores (por exemplo, o Safari não aceita deslocamentos de traços negativos). Enquanto esperamos que esse bug seja corrigido, vamos escolher uma abordagem diferente.

Vamos alterar o valor de Traços para que o caminho comece com um intervalo seguido por um traço (por padrão, as linhas tracejadas sempre começam com um traço). Em seguida, inverta os valores da animação Offset. Isso animará a linha na direção oposta.

Agora que terminamos com “H”, podemos passar a animar todos os outros caminhos da mesma maneira. Eventualmente, terminamos animando o ponto do ponto de exclamação. Como é um círculo com um preenchimento, não um contorno, não usaremos o Path Animator. Em vez disso, usamos o Scale Animator para fazer o ponto aparecer no final da animação.

Lembre-se sempre de verificar a posição da origem de transformação de um elemento ao jogar com animações de escala. No SVG, todos os elementos têm sua origem de transformação no canto superior esquerdo da tela por padrão. Isso geralmente torna as funções de transformação de codificação uma tarefa muito difícil e tediosa. Felizmente, o SVGator nos poupa de todo esse aborrecimento calculando todas as transformações em relação ao objeto, em vez da tela. Por padrão, o SVGator define a origem da transformação de cada elemento em seu próprio canto superior esquerdo. Você pode alterar sua posição na linha do tempo, usando um botão ao lado do nome da camada.

Vamos adicionar o toque final à animação e ajustar as funções de tempo. As funções de tempo definem a velocidade ao longo do tempo dos objetos sendo animados, permitindo-nos manipular sua dinâmica e tornar a animação mais natural.

Neste caso, queremos dar a impressão de que o texto está sendo escrito por um único movimento contínuo de uma mão. Portanto, apliquei uma função Ease-in na primeira letra e uma função Ease-out na última letra, deixando as letras do meio com uma função Linear padrão. No SVGator, as funções de tempo podem ser aplicadas a partir da linha do tempo, ao lado dos parâmetros do Animator:

Após aplicar a mesma lógica ao ponto de exclamação, nossa animação está pronta e pronta para ser exportada!

Exemplo nº 2: ícone animado

Agora vamos analisar um exemplo mais focado na interface do usuário. Aqui, vamos usar o SVGator para replicar uma animação de ícone popular: transformar um menu de hambúrguer em um botão para fechar.

O objetivo da animação é transformar suavemente o ícone para que a barra do meio do hambúrguer se torne um círculo e as barras ao redor se cruzem criando um ícone próximo.

Preparando o arquivo

Para entender melhor o que estamos construindo e como preparar um arquivo para tal animação, é útil começar com um rascunho representando os principais estados da animação.

Uma vez que tenhamos uma ideia geral do que consiste nossa animação, podemos desenhar as formas que nos permitirão criá-la. Vamos começar com o círculo. Como vamos usar animação de caminho, precisamos criar um caminho que cubra todo o percurso da linha, começando como uma barra reta no meio do menu do hambúrguer e terminando como um círculo ao redor.

As outras duas barras do ícone do menu têm uma tarefa mais fácil - vamos apenas girá-las e alinhá-las ao centro do círculo. Assim que combinarmos todas as formas, estaremos prontos para exportar o arquivo como SVG e importá-lo para o SVGator.

Criando uma animação

Vamos começar adicionando a primeira forma à linha do tempo e aplicando o Path Animator a ela. Para o estado inicial, queremos que apenas a linha horizontal no meio fique visível, enquanto o restante do caminho permanece oculto. Para alcançá-lo, defina o comprimento do traço para ser igual ao comprimento das linhas do hambúrguer. Isso fará nossa linha do meio reta do ícone do menu. Para encontrar o valor correto, você pode usar o comprimento de uma das outras linhas do hambúrguer. Você pode copiá-lo da linha do tempo ou do painel Propriedades na barra lateral direita do aplicativo.

Em seguida, defina o comprimento da lacuna a seguir para um valor maior que o comprimento restante do caminho para que fique transparente.

O estado inicial da nossa animação está pronto. O que acontece a seguir é que transformamos essa linha em um círculo. Para fazer isso, duas coisas precisam acontecer simultaneamente. Primeiro, usamos Offset para mover a linha ao longo do caminho. Em segundo lugar, alteramos a largura do traço para tornar a linha mais longa e cobrir todo o círculo.

Com o círculo pronto, vamos cuidar do ícone de fechar. Assim como antes, precisamos adicionar duas animações ao mesmo tempo. Primeiro, queremos que a linha superior se incline para baixo (45 graus) e a linha inferior se mova para cima (-45 graus) até que se cruzem simetricamente. Em segundo lugar, precisamos mover as linhas ligeiramente para a direita para que fiquem alinhadas com o círculo.

Como você deve se lembrar do exemplo anterior, no SVGator, as origens da transformação estão localizadas no canto superior esquerdo por padrão. Isso é muito conveniente para nós, pois, neste caso, é exatamente onde queremos que eles estejam. Tudo o que precisamos fazer é aplicar os ângulos de rotação corretos.

Quando se trata de alinhar as linhas com o círculo, observe que não precisamos movê-las separadamente. Em vez de adicionar Animators a ambas as linhas, podemos adicionar um grupo contendo ambos à linha do tempo e animá-los juntos com um único Position Animator. Esse é um daqueles momentos em que uma estrutura de arquivos limpa e bonita compensa.

A próxima coisa a fazer é adicionar uma animação reversa que transforma o botão fechar novamente em um menu de hambúrguer. Para conseguir isso, podemos basicamente seguir os passos anteriores na ordem inversa. Para acelerar um pouco as coisas, copie e cole os quadros-chave existentes na linha do tempo - essa é mais uma melhoria que o SVGator introduziu nos últimos meses.

Uma vez feito, não se esqueça de ajustar as funções de temporização. Aqui, decidi usar um efeito Ease-in-out em todos os elementos. Nosso ícone está pronto para a ação.

Implementação

Embora a implementação de microinterações vá muito além do escopo deste artigo, deixe-me fazer uma breve descrição de como essa animação pode ser trazida à vida em um projeto real.

Ilustrações e animações decorativas geralmente são mais diretas. Muitas vezes, você pode usar arquivos SVG gerados pelo SVGator fora da caixa. No entanto, não podemos dizer isso sobre nosso ícone. Queremos que a primeira parte da animação seja acionada quando os usuários clicarem no botão para abrir a gaveta do menu e que a segunda parte da animação seja reproduzida quando clicarem pela segunda vez para fechar o menu.

Para fazer isso, precisamos dividir nossa animação em algumas partes separadas. Não discutiremos aqui os detalhes técnicos da implementação de tal animação, pois depende muito do ambiente e da pilha de tecnologia com a qual você está trabalhando; mas vamos pelo menos inspecionar o arquivo SVG gerado para extrair os estados de animação cruciais.

Começaremos ocultando o plano de fundo e ajustando o tamanho da tela para corresponder às dimensões do ícone. No SVGator, podemos fazer isso a qualquer momento e não há restrições quanto ao tamanho da nossa tela. Também podemos editar os estilos do ícone, como cor e largura do traço, e testar a aparência do seu gráfico em um fundo escuro usando uma chave no canto superior direito.

Quando estivermos prontos, podemos exportar o ícone para SVG e abri-lo em um editor de texto.

Os elementos que você vê no corpo do documento são os componentes do seu gráfico. Você também deve notar que a primeira linha de código é excepcionalmente longa. Logo após a tag <svg> de abertura, há um elemento <style> com bastante CSS minificado dentro. É aí que toda a animação acontece.

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

É muito legal do SVGator minificar o código para nós. No entanto, teremos que desfazê-lo. Assim que o código CSS estiver escrito por completo (você pode fazer isso nas ferramentas de desenvolvimento do seu navegador ou em um dos muitos formatadores de código online), você verá que é uma longa lista de @keyframes seguida por uma lista de regras de id usando os @keyframes em suas propriedades de animation .

O código pode parecer ilegível (mesmo quando bem formatado), mas é muito repetitivo. Depois de entender a regra subjacente, segui-la não é mais tão difícil. Primeiro, temos os @keyframes . Cada elemento animado tem sua própria @keyframes @-rule. Eles são classificados na mesma ordem que os elementos no SVGator. Portanto, em nosso caso, a primeira regra @ se aplica à barra do meio do ícone do hambúrguer, a segunda à barra superior e assim por diante. Os quadros-chave dentro também correspondem à ordem dos quadros-chave criados no SVGator:

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

Tudo o que você precisa fazer agora é usar esses valores dos quadros-chave para codificar sua interação. Ainda há muito trabalho pela frente, mas graças ao SVGator a parte crucial já está feita.

O que acontece a seguir é outra história. No entanto, se você está curioso para ver um exemplo de como essa animação pode funcionar na prática, aqui está um pequeno CodePen para você:

O exemplo é construído com React e usa estados para alternar classes CSS e acionar transições entre os respectivos valores CSS. Portanto, não há necessidade de propriedades de animation e @keyframes @-rules.

Você pode usar um conjunto de prioridades personalizadas de CSS listadas na parte superior do código SCSS para controlar o estilo do ícone, bem como a duração das transições.

Exemplo #3: Ilustração Animada

Para o terceiro e último exemplo deste artigo, vamos criar uma ilustração animada de um átomo com partículas em órbita.

Linhas tracejadas e linhas pontilhadas

Nos dois exemplos anteriores, aproveitamos os caminhos SVG tracejados. As linhas tracejadas são legais, mas você sabia que o SVG também suporta linhas pontilhadas? Uma linha pontilhada em SVG não é mais, nada menos que uma linha tracejada com letras redondas, e o comprimento dos traços é igual a zero.

Se podemos ter um caminho com muitos pontos, quem disse que não podemos ter um caminho com um único ponto? Anime o deslocamento do traço e você terá uma animação de um círculo seguindo qualquer caminho que desejar. Neste exemplo, o caminho será uma elipse e um círculo representará uma partícula em órbita.

Preparando o arquivo

Como nenhum elemento SVG pode ter dois traços ao mesmo tempo, para cada uma das partículas precisamos de duas elipses. O primeiro deles será uma órbita, o segundo será para a partícula. Multiplique por três, combine com outro círculo no meio para o núcleo e aqui está: uma simples ilustração de átomo, pronta para ser animada.

Nota : No momento da escrita, criar linhas pontilhadas no Figma é uma tarefa difícil. Não apenas você não pode definir o comprimento de um traço como zero, mas também não pode criar um espaço entre os traços longo o suficiente para cobrir todo o caminho. E quando se trata de exportar, todas as suas configurações desaparecem de qualquer maneira. No entanto, se você estiver trabalhando com o Figma, não desanime. Vamos corrigir todos esses problemas facilmente no SVGator. E se você estiver trabalhando no Sketch, Illustrator ou similar, você não deve ter esses problemas.

Criando uma animação

Depois de importar o arquivo SVG para o SVGator, começaremos corrigindo as linhas pontilhadas. Como mencionado acima, para obter um ponto circular perfeito, precisamos de um comprimento de traço definido como zero. Também definimos o comprimento do intervalo igual ao comprimento do caminho (copiado de cima). Isso fará com que nosso ponto seja o único visível.

Com todas as três partículas prontas, podemos adicionar novos quadros-chave e animar os deslocamentos por um comprimento total do caminho. Finalmente, jogamos um pouco com os valores de Offset para fazer com que as posições dos pontos pareçam um pouco mais aleatórias.

Lembre-se de que se você achar sua animação muito rápida ou muito lenta, sempre poderá alterar sua duração nas configurações. No momento, o SVGator suporta animações de até 30 segundos.

Como toque final, adicionei um pouco de salto a todo o gráfico.

Agora a animação está pronta e pode ser usada, talvez como um loader gráfico.

Uma palavra rápida sobre acessibilidade

Como você pode ver, dificilmente há um limite para o que pode ser alcançado com o SVG. E as animações de caminho são uma parte muito importante de seu kit de ferramentas. Mas como um sábio disse uma vez, com grandes poderes vêm grandes responsabilidades. Por favor, evite usá-los em excesso. A animação pode dar vida ao seu produto e encantar os usuários, mas muitas animações também podem arruinar toda a experiência.

Além disso, considere permitir que os usuários desativem as animações. Pessoas que sofrem de enjôo e outras condições relacionadas acharão essa opção muito útil.

Conclusão

Por hoje é isso. Espero que tenham gostado desta viagem pelas possibilidades das animações de caminhos. Para experimentá-los, basta visitar o site do SVGator, onde você também pode aprender sobre seus outros recursos e preços. Se você tiver alguma observação ou pergunta, não hesite em adicioná-la nos comentários. E fique atento às próximas atualizações sobre o SVGator — há muitos outros novos recursos incríveis já a caminho!

Leitura adicional

• “Como funciona a animação de linha SVG”, Chris Coyer Um guia ilustrado para animações de caminho SVG que explica lindamente como elas realmente funcionam.
• “Um guia prático para SVG e ferramentas de design”, Mikolaj Dobrucki Um guia abrangente sobre noções básicas de SVG para ajudá-lo a entender como o SVG é gerado por ferramentas de design e como trabalhar com ele para sua própria vantagem.
• “Revisitando Prefers-Reduced-Motion, The Reduced Motion Media Query,” Eric Bailey Uma ótima introdução ao tópico de animação e acessibilidade.
• “Como criar uma animação de caminho”, SVGator Um pequeno e doce tutorial em vídeo do YouTube sobre o Path Animator

Recursos úteis

• Animações de caminho do SVGator Leia mais sobre o Path Animator em sua página inicial original.
• Tutoriais do SVGator Uma série de tutoriais em vídeo explicando os recursos cruciais do SVGator.
• Central de Ajuda do SVGator Respostas às perguntas mais comuns sobre o SVGator, seus recursos e planos de associação.