Como criar, editar e animar SVGs em um só lugar com o SVGator 3.0

Este artigo foi gentilmente apoiado por nossos queridos amigos do SVGator que são apaixonados por projetar e produzir animações únicas, de alta qualidade e inesquecíveis. Obrigado!

O SVGator está evoluindo e está evoluindo muito. Há três anos, publicamos uma introdução abrangente ao uso básico do SVGator. Naquela época, era um aplicativo destinado exclusivamente para animar arquivos SVG criados em outros aplicativos. Há dois anos, apresentamos a você uma nova versão do SVGator e seus recursos de animação aprimorados. Desta vez, estamos apresentando uma nova versão principal do SVGator que oferece um ambiente maduro e completo para desenhar do zero e animar gráficos SVG.

Nota : Alguns dos recursos do SVGator abordados neste tutorial são pagos. No plano gratuito, você pode criar e exportar um número ilimitado de gráficos SVG. Você também pode usar recursos básicos de animação e exportar 3 animações por mês. Recursos avançados de animação estão disponíveis em um plano pago, a partir de 11 USD/mês.

Neste artigo, seguiremos um processo de criação de um carregador SVG personalizado, desde desenhá-lo do zero e aplicar vários efeitos visuais, passando pela criação de diferentes tipos de animações, até exportar seu arquivo e prepará-lo para uso na web.

Começamos criando um novo arquivo em branco e alterando sua cor de fundo.

A partir daqui, podemos começar a desenhar a ilustração que vamos animar mais tarde. O SVGator permite que você desenhe todas as formas SVG padrão, como elipses, retângulos e polígonos, além de usar as ferramentas Caneta e Lápis para desenhar as suas próprias. Você também pode usar funções booleanas para combinar formas entre si.

Para facilitar a criação da forma desejada, comecei desenhando um círculo como guia no centro da tela. Felizmente, o SVGator simplifica o alinhamento e a medição de elementos, graças a um sistema inteligente de guias e funções de encaixe. Você também pode usar grades e réguas para melhor precisão e fidelidade.

Em seguida, usando uma Pen Tool, desenhamos o primeiro blob seguindo aproximadamente a forma do círculo abaixo. A Ferramenta Lápis também serviria bem para esse propósito. O que é realmente legal sobre este é que a Ferramenta Pencil do SVGator geralmente cria formas com muito menos pontos de nó do que ferramentas comparáveis ​​em outros aplicativos, o que torna o resultado não apenas mais suave, mas também muito mais leve no tamanho do arquivo.

Criar e editar formas no SVGator pode parecer um pouco diferente do que em outras ferramentas vetoriais, mas depois que você se acostuma, é realmente muito fácil. Também é importante observar que todos os recursos de desenho do SVGator são totalmente gratuitos, para que você possa usá-lo como seu software de criação de SVG o quanto quiser, sem nenhum custo.

Com um primeiro blob pronto, é hora de estilizá-lo um pouco. Aqui, estamos nos deparando com uma das maiores vantagens competitivas do aplicativo. Outros aplicativos gráficos vetoriais populares que permitem exportar arquivos SVG geralmente precisam aproveitar seus recursos para se adequar a uma infinidade de formatos e casos de uso. Ao mesmo tempo, aplicativos focados principalmente em interfaces de usuário, atendem principalmente ao que é possível com propriedades HTML e CSS, raramente dando muito amor a recursos específicos de SVG, como marcadores de traço ou filtros.

O SVGator, destinado exclusivamente à criação de arquivos SVG, aproveita ao máximo o que esse formato, em particular, tem a oferecer. Isso inclui opções específicas de como o SVG lida com traços, preenchimentos, elementos de gradiente (você já ouviu falar sobre o atributo spreadMethod dos gradientes SVG?), filtros (como desfoque, sombra ou sépia) e muitos outros.

Ele também permite que você estilize (seus preenchimentos, traçados, efeitos e assim por diante) com a confiança de que o resultado final será o esperado, pois todos esses recursos foram criados especialmente para arquivos SVG.

No nosso caso, um único preenchimento de gradiente e um traçado de gradiente servirão. Também apliquei um filtro de desfoque de luz no elemento como toque final. Observe que, como o SVGator usa filtros SVG nativos em vez de CSS, ele permite controlar as propriedades de desfoque para ambos os eixos separadamente. Nesse caso, apliquei apenas um desfoque no eixo x.

Em seguida, podemos duplicar o blob e usar a Pen Tool novamente para criar mais dois blobs diferentes. A maneira como a Pen Tool funciona facilita muito a modificação da forma sem perder a linha suave e contínua dela.

Como elemento final da ilustração, adicionamos alguns pontos brilhantes colocados aleatoriamente. Eles não são mais do que círculos com um preenchimento de gradiente aplicado.

Nosso carregador em seu estado inicial está pronto. Agora, é hora da parte mais divertida: a animação!

Realmente não importa qual elemento da ilustração vamos animar primeiro. No meu caso, comecei animando os brilhos. Ao adicionar um animador de posição a cada elemento, podemos criar animações de caminho complexas. As animações de caminho nos permitem fazer um elemento seguir um caminho de qualquer forma ao longo do tempo. No nosso caso, fará com que os brilhos circulem pela tela para criar a impressão de voar ao redor dos elementos centrais da ilustração. Também podemos usar Animadores de Escala e Opacidade para fazer com que o brilho pareça se afastar cada vez mais do espectador e fortalecer uma ilusão de movimento no espaço tridimensional.

Nota : Se você quiser aprender mais sobre como criar animações de caminho, recomendo assistir a este tutorial: “Motion Path Animation — Animate Any Object Along a Custom Path.”

Para animar os blobs, um animador Morph pode ser usado. Ele nos permite modificar uma forma no tempo e criar transições suaves entre esses estados. Para obter uma transição agradável e limpa entre duas formas, adicionamos um quadro-chave à linha do tempo do animador Morph e modificamos a forma com uma Pen Tool — exatamente como fizemos quando desenhamos os blobs adicionais.

Se você quiser aprender mais sobre como criar animações de morph, este tutorial não apenas apresentará o básico, mas também o levará a um nível totalmente novo: “Tutorial de animação de morph avançado”.

Uma parte importante de cada animação é sua função de temporização. Para brilhos, usei principalmente as funções de tempo Ease In Out. Isso permite que os pontos diminuam a velocidade quando atingem uma curva estreita da órbita e acelerem em trechos retos, ajudando o movimento a parecer mais próximo do que pareceria em tal perspectiva de espaço multidimensional.

Para blobs, também usei uma função Ease In Out. Você pode notar que ambas as funções de tempo são diferentes de como as funções Ease In Out parecem por padrão. Eu os “afiei” um pouco usando a interface de curva bezier. Isso me permitiu fazer os movimentos parecerem suaves e naturais, sem giros e soluços bruscos, mas também sem desacelerações muito visíveis.

Após mais alguns pequenos ajustes, o arquivo está pronto para ser exportado. A nova versão do SVGator combina a funcionalidade de visualização com funcionalidades de exportação. Graças a isso, você pode ter uma visualização em tempo real do navegador de suas animações enquanto também testa e altera as configurações de exportação.

No nosso caso, queremos que a animação funcione como um loop infinito. Você também pode controlar o comportamento do gráfico, para mostrar no carregamento ou na ação do usuário, como clicar ou rolar.

O arquivo exportado corresponde perfeitamente à animação que criamos no aplicativo e está pronto para uso na web.

Espero que tenha gostado deste artigo e que ele o inspire a criar as coisas mais incríveis com SVG em seu trabalho!

Onde próximo? Abaixo, você encontra alguns recursos úteis para continuar sua jornada com SVG e SVGator:

• Tutoriais do SVGator
  Uma série de tutoriais em vídeo curtos para ajudá-lo a começar a usar o SVGator.
• Central de Ajuda do SVGator
  Respostas às perguntas mais comuns sobre o SVGator, seus recursos e planos de associação.
• Liberte o poder das animações de caminho com o SVGator
  Uma extensa introdução às animações de caminho e como criá-las com o SVGator.