Animando arquivos SVG com SVGator

( Este artigo é gentilmente patrocinado pelo SVGator .) Arquivos SVG animados tornaram-se muito populares. Eles são totalmente escaláveis ​​(porque são vetores), pequenos e 100% baseados em código, o que permite tantas transformações e ajustes. Isso, no entanto, tem um preço: a curva de aprendizado íngreme para iniciantes completos.

O SVGator se compromete a resolver esse problema, tornando muito fácil para qualquer pessoa fazer animações simples usando uma interface familiar. É um aplicativo de animação baseado na web que permite importar, animar e exportar animações SVG e elimina a necessidade de iniciantes aprenderem a codificar. Nós experimentamos, e realmente adoramos.

Comece a usar o aplicativo

Acesse https://www.svgator.com para começar a usar o aplicativo. O processo de inscrição é bastante simples (figuras 1 a 3): Clique em “Animar agora”, depois em “Criar conta”, preencha seus dados e pronto.

Você será levado diretamente para o projeto de amostra “Stopwatch”, que permite explorar os recursos do SVGator. Se você não conseguir encontrar o caminho dentro do aplicativo, há um tutorial legal (figura 4) que o guiará em como começar a usá-lo: Importe um SVG estático, adicione elementos à linha do tempo e adicione animadores a elementos e quadros-chave a animar as quatro propriedades atualmente disponíveis (escala, opacidade, posição e rotação).

Se você já usou um aplicativo de animação, a interface de usuário do SVGator deve parecer bastante familiar para você, e tudo provavelmente parecerá no lugar certo. Você só adiciona elementos que irá animar, o que mantém a linha do tempo limpa e fácil de digitalizar.

O projeto de relógio animado inicial faz um ótimo trabalho ao apresentar o SVGator. Você sempre pode voltar a ele e usá-lo como referência.

Agora que temos o básico fora do caminho, vamos pular para fazer nossas próprias animações!

O que vamos fazer

Confira este ícone de envelope simples que projetamos no Sketch (figura 5). Ele começa fechado, depois abre e uma carta aparece, seguida de seu conteúdo. Em seguida, a carta salta do envelope e aumenta para mostrar a caixa de seleção verde.

Segue um resumo do processo:

• Começaremos fazendo um storyboard simples para visualizar nosso ícone em seus diferentes estados. Enquanto estamos nisso, sincronizaremos constantemente com o SVGator e importaremos elementos do ícone para garantir que tudo funcione conforme o esperado.
• Em seguida, criaremos uma cópia mestre do ícone, que incluirá todos os elementos necessários e a exportaremos para o SVGator. Talvez precisemos modificar muito essa cópia mestre ao longo do processo.
• Em seguida, faremos toda a animação em um único projeto SVGator e exportaremos, garantindo que funcione conforme o esperado.
• Por fim, incluiremos o ícone em um formulário simples de boletim informativo pré-codificado para ver como ele fica em um ambiente da Web real. Também o veremos redimensionar para resoluções menores.
• Você pode baixar tudo aqui.

Vamos começar!

Parte 1: Criar e exportar um ícone do Sketch

• Existem algumas diferenças entre projetar um ícone SVG simples e projetar um ícone SVG que você planeja animar mais tarde. Para começar, é importante notar que ele deve ser composto de formas bastante simples, e você deve planejar suas animações em torno de transições simples com base na manipulação apenas do seguinte: escala, rotação, posição e opacidade. Estas são as únicas quatro propriedades que o SVGator atualmente permite animar, portanto, se você elaborou algo mais complexo, não poderá fazê-lo.

Faça um storyboard simples para economizar tempo

O storyboard permite visualizar todas as suas transições antes de importá-las no SVGator. Também facilita o teste de transformações antes de se comprometer a fazer toda a animação. Muitas vezes acontece de você descobrir um problema com a ilustração que deveria ter sido feita de forma diferente no Sketch e, portanto, você precisa voltar e alterá-la. Então, você precisa reimportar todo o arquivo no SVGator e começar com as animações do zero. Como você não gostaria de fazer isso todas as vezes, o storyboard ajuda, forçando você a planejar as coisas com antecedência.

Por exemplo, inicialmente planejei que o envelope ficasse mais na parte inferior da tela, mas depois de importá-lo para o SVGator e brincar com o fechamento e a abertura, ficou claro que ele precisa ficar no meio enquanto fechado e ligeiramente para baixo quando aberto — um detalhe que foi omitido nas imagens estáticas.

Dica: Confira o storyboard no arquivo Sketch → Artboard “storyboard” .

Nomenclatura e organização da camada

Se você nomear suas camadas no Sketch, ele funcionará como esperado, e todos os nomes que você atribuiu no Sketch serão transferidos para o seu projeto no SVGator. Mas se você usar o SVGO Compressor ou um plugin semelhante para diminuir os arquivos SVG, os nomes desaparecerão e o SVGator os substituirá por outros baseados na tag HTML, e você terminará com algo semelhante ao mostrado na figura 7 .

Dica: Se você já estiver usando o SVGO Compressor para outros SVGs e não quiser desativá-lo, basta arrastar e soltar o arquivo da área de visualização de exportação no Sketch para o local desejado (figura 8). Isso contornará o SVGO Compressor e exportará o SVG como está!

Usar grupos também é ótimo, porque o aplicativo os reconhece e você pode até animar simultaneamente uma camada e seu grupo pai, adicionando um pouco mais de complexidade.

Não encontramos nenhuma limitação no número de camadas usadas, mas, novamente, nosso ícone é bastante simples.

Preparando o ícone para animação

Agora que temos a ideia em um storyboard e preparamos o arquivo mestre, vamos exportá-lo de uma maneira que possamos entender no SVGator. Certifique-se de verificar novamente a hierarquia da camada. Pense em como uma determinada camada irá interagir com outra e onde ela deve ser colocada no painel Camadas. Na figura 9, você verá que selecionamos “top_opened” — essa é a aba superior aberta do envelope. Deve ficar atrás da folha de papel branca. E vice-versa, “top_closed” é a aba fechada do envelope, e deve ficar por cima de tudo; é por isso que é a primeira camada em nosso grupo de “conteúdo”.

Dica: Você pode estar se perguntando por que toda a aba superior é feita de duas camadas. É porque não podemos girar formas ou realmente transformá-las no espaço 3D usando o SVGator. Estamos emulando isso esmagando a primeira camada e depois esticando a segunda, criando assim a ilusão de uma transformação 3D .

Se você olhar para o nosso storyboard, a ideia original era fazer com que a folha saltasse do envelope e aumentasse para eventualmente escondê-la. Vamos conseguir isso empurrando a folha original para cima, enquanto temos outra folha oculta (“sheet_top”) na frente do envelope (figura 10). No momento em que eles se encontrarem no ponto mais alto, eles se trocarão e a folha da frente cairá na frente do envelope. Isso também é uma ilusão visual - não podemos realmente mover a folha no espaço z, então essa é uma maneira de imitá-la.

Levando tudo isso em consideração, agora podemos exportar o ícone. É praticamente um único SVG que contém todos os elementos de que precisamos, empilhados uns sobre os outros de maneira útil.

Dica: Certifique-se de ter todos os elementos marcados como visíveis (não ocultos) antes de exportar. Você pode ver o arquivo que usamos como exportação em Arquivo de esboço → Prancheta “exportar” .

Parte 2: Animando o ícone

Abra o SVGator e clique em “Import new” para iniciar um novo projeto (figura 11):

Se você fez tudo corretamente, deverá ver algo como a figura 12 e o pequeno clipe abaixo (clipe 1): todas as camadas empilhadas umas sobre as outras e prontas para uso. Se, por acaso, você não vir tudo, volte ao Sketch e verifique novamente se todas as camadas estão visíveis.

Animando a abertura do envelope

Começaremos importando alguns elementos na linha do tempo. A maneira como o SVGator funciona é que você começará com uma linha do tempo vazia. Você escolhe quais elementos adicionar no menu suspenso "Elementos". Você terá que verificá-los manualmente usando o ícone de olho para ver qual é a camada que está procurando. Alternativamente, você pode clicar diretamente no elemento na tela, que fará o mesmo.

Vamos trabalhar nas etapas 1 e 2 do storyboard, especificamente na abertura da aba. Vamos desabilitar as camadas que não precisamos por enquanto; voltaremos a eles mais tarde (veja o clipe 1 para ver como fazer isso). Devemos ficar apenas com o envelope básico, o que significa que você deve desabilitar as seguintes camadas: “sheet_top_content”, “sheet_top_bgr” e “sheet_bottom_bgr”.

Em seguida, clique em “top_opened” e clique no ícone de adição à esquerda ou clique duas vezes no elemento para adicioná-lo à linha do tempo. Faça o mesmo para “top_closed”. Agora você deve ter ambas as camadas na linha do tempo (figura 13).

Dica: Se você quiser avançar rapidamente em todo o processo, confira o clipe 2 (as ações podem não estar na mesma ordem descrita abaixo) .

• Clique em “top_closed” na linha do tempo e depois no menu suspenso “Animadores”. Adicione um animador de escala.
• Adicione um animador de escala para “top_opened” também.
• Em seguida, clique no pequeno ícone de destino ao lado do nome da camada na linha do tempo. Esta é a propriedade transform-origin e permite definir um ponto de pivô para a transformação do elemento. Vamos escolher top-center para “top_closed”, porque vamos reduzi-lo para cima (figura 14), e depois bottom-center para “top_opened”.
• Agora, com “top_closed” selecionado, clique no sinal de mais na propriedade Scale para adicionar um quadro-chave à linha do tempo. Uma forma de diamante amarelo aparecerá na linha do tempo. Vamos passar para 0,4s e clicar no sinal de mais novamente (figura 15). Esse segundo quadro-chave será nosso ponto final de transformação, quando a aba já estiver aberta. Então, vamos fazer sua Escala 100% 0%, deixando o primeiro quadro-chave como 100% 100%.
• Ative Ease-in para “top_closed” clicando no pequeno ícone de destino ao lado do nome da camada (figura 16).
• Enquanto estiver em 0.4s, adicione um quadro-chave Opacity para “top_closed” clicando duas vezes em Opacity no menu “Animators” e, em seguida, clicando no sinal de mais ao lado da propriedade Opacity na linha do tempo. Altere para 0%.
• Volte alguns quadros e adicione 100% para Opacity. Estamos fazendo isso para evitar falhas na parte superior da aba.

Dica: A atenuação fará com que o movimento pareça mais natural e, como estamos projetando uma animação que emula o movimento de um único elemento, é natural facilitar o início e o final da animação .

Agora, vamos lidar com a parte “top_opened”, o final da animação. Como observamos anteriormente, estamos fazendo isso em duas partes para emular uma abertura 3D da aba.

• Pegue a camada “top_opened” na linha do tempo, vá para 0,4s na linha do tempo e adicione um quadro-chave Scale, depois outro quadro-chave em 0,8s . Faça com que a Escala em 0,4s seja 100% 0% e deixe o valor da Escala de 0,8s permanecer 100% 100%.
• Ative a facilidade de saída. Aperte o play para visualizar a animação.

Parece legal, mas agora todo o envelope precisa ser movido para baixo para que caiba no plano de fundo circulado. Encontre um grupo chamado apenas “g” nos Elementos e adicione um animador de Posição a ele. Adicione um quadro-chave de posição a 0,2s e depois a 0,8s. Altere o valor de 0,8s para 0 35. Adicione Ease-in-out para uma animação suave. E é isso! Animamos com sucesso o envelope aberto e até o movemos um pouco para baixo.

Adicionando complexidade: a letra aparece

Abrir o envelope é legal, mas podemos torná-lo mais interessante introduzindo uma folha de papel. Para isso, precisaremos revelar a camada da folha, que chamamos de “sheet_bottom_bgr”.

• Clique no ícone de olho ao lado de “sheet_bottom_bgr” no menu “Elements” para torná-lo visível. Adicione-o à linha do tempo (clique duas vezes nele).
• Agora, vá para algum lugar no meio da animação — por exemplo, 0,5s — e adicione um quadro-chave Position. Adicione outro após 0,4s. Selecione o primeiro quadro-chave e desloque a camada em 140 pixels no eixo y (0 140).
• Adicione um efeito Ease-in-out. Agora temos uma animação um pouco mais interessante.

Dica: se você preferir assistir em um vídeo, confira o clipe 3 abaixo .

Ainda mais complexidade: animando a escala da letra

Para ir mais longe, vamos animar a carta saindo do envelope e vamos revelar algumas linhas de texto “escritas” na carta. Para isso, teremos que modificar um pouco a animação anterior. (Se você quiser avançar, basta assistir ao screencast e repeti-lo.)

• Comece movendo o último quadro-chave Position de “sheet_bottom_bgr” de 0,9s para 1,1s e altere-o para 0 -190. O que estamos fazendo com isso é tirar a folha do envelope, para que possamos trocá-la rapidamente com a outra folha que já preparamos.
• Vá para 1.1s, ative “sheet_top_content” e “sheet_top_bgr” e adicione-os à linha do tempo com os quadros-chave de posição para ambos de 0 a 190.
• Adicione quadros-chave em 1,5s e torne-os 0 40.
• Habilite Ease-out para ambos.

Este é o movimento da folha frontal e deve se parecer com o que você vê na figura 17.

Agora vamos consertar a folha traseira. Ele deve desaparecer assim que a frente aparecer, e a folha frontal só deve aparecer depois disso.

• Vá para 1.1s e selecione “sheet_bottom_bgr”. Adicione um animador de opacidade e um quadro-chave. Defina-o para 0%.
• Mova um quadro para trás e defina outro quadro-chave de opacidade, tornando-o 100%.

Vamos fazer as respectivas alterações na folha de rosto também:

• Vá para 1.1s, selecione “sheet_top_bgr” e adicione um quadro-chave de opacidade de 100%.
• Mova um quadro para trás e torne a opacidade 0%.

Você deve ver algo como a figura 18 abaixo. Podemos identificar dois problemas aqui:

• O conteúdo é exibido na parte superior do envelope antes que a transição aconteça.
• Há uma falha ao trocar a folha de trás e a frente.

Vamos corrigir o primeiro problema. Vamos ocultar o conteúdo e a caixa de seleção e mostrá-los depois que a folha frontal aparecer.

• Vá para 1,5s, selecione “sheet_top_content” e adicione um quadro-chave de opacidade de 100%.
• Retroceda um quadro e defina outro quadro-chave de opacidade para 0%.
• Agora, vamos torná-lo um pouco mais interessante animando cada camada dentro do conteúdo frontal.
  • Vá para 1.5s e procure o conteúdo de “sheet_top_content” no menu Elements.
  • Adicione quadros-chave de opacidade para todas as três camadas em “sheet_top_content”.
  • Faça a opacidade para todas as três camadas 0%.
  • Mova para 1,7s e defina-o para 100% para todas as três camadas.
  • Fique em 1.7s e selecione Combined-shape e adicione um quadro-chave Rotate.
  • Vá para 1.5s e defina a rotação para -45deg.
  • Adicione Ease-in-out para a rotação.

O segundo problema é uma falha que acontece porque nossa folha de trás desaparece muito cedo.

• Vá para 1.1s, selecione “sheet_bottom_bgr” e desloque seus quadros-chave de opacidade um quadro para frente. Aqui está o que você deve observar (figura 19):

Para torná-lo mais atraente, vamos dimensionar a folha frontal e o conteúdo quando ele sair do envelope. Poderíamos dimensionar todo o “top_sheet_content”, mas isso pode resultar em alguns desalinhamentos em alguns navegadores. É melhor dimensionar cada uma de suas camadas filhas por conta própria.

• Vá para 1.1s, selecione “sheet_top_bgr” e adicione um quadro-chave Scale.
  • Faça o mesmo para Combined-Shape, “line_top” e “line_bottom”.
• Vá para 1,5s e adicione outro quadro-chave Scale com valores de 120% 120%.
  • Faça o mesmo para Combined-Shape, “line_top” e “line_bottom”.
• Habilite Ease-in-out.
• Como o dimensionamos, precisamos diminuir a quantidade que toda a folha frontal se move para baixo. Vá para 1.5s, selecione “sheet_top_content” e “sheet_top_bgr”, e mude sua posição de 0 40 para 0 20.

Dica: Não há problema em dimensionar o conteúdo em SVG porque ele é todo baseado em vetores, para que você não perca nenhuma qualidade .

Veja como deve ficar agora (figura 20):

Tudo bem, mas toda a animação precisa retornar ao primeiro quadro. Isso porque queremos reutilizá-lo. Nossa idéia é fazer com que a folha da frente deslize para baixo e o envelope feche e gire para sua posição original.

• Vá para 2.8s, selecione “sheet_top_bgr” e adicione os quadros-chave de posição.
  • Faça o mesmo para “sheet_top_content”.
• Precisamos adicionar mais tempo, porque a linha do tempo padrão é 3s. Clique no ícone de engrenagem no canto inferior esquerdo acima da linha do tempo, altere a duração para 00:04:50 (figura 21) e pressione “Enter”. Agora estendemos a linha do tempo.
• Mova para 3,6s, adicione outro par de quadros-chave de posição e torne seus valores 0 360. Altere o easing para Position de ambas as camadas para Ease-in-out.

• Em 1,3s, selecione “top_closed” e “top_opened” e adicione os quadros-chave Scale.
• Adicione mais dois em 1,5s. Para o segundo quadro-chave, “top_closed” deve ter 100% 100% e “top_opened” 100% 0%. Fechamos com sucesso a aba atrás da folha escalonada.
• Agora, tudo o que precisamos fazer é mover o envelope de volta para o centro e garantir que a aba superior apareça novamente. Vá para 3s e adicione um quadro-chave de posição para “g”. Adicione outro em 3.4s e torne-o 0 0. Vá para 2.8s e adicione um quadro-chave Opacity 0% para “top_closed”. Em seguida, mova para 3s e altere a opacidade para 100%.

Parabéns! Animamos todo o ícone. Veja como deve ficar (figura 22):

Parte 3: Implementando a animação exportada em um ambiente Web real

Vamos colocar o ícone em um ambiente real. Codificamos um formulário simples de boletim informativo e incluímos o ícone nele. Você pode exportar o ícone do SVGator clicando em “Exportar SVG”.

Depois de clicar em “Assinar”, uma mensagem de agradecimento é exibida e a animação do ícone é iniciada.

Funciona com dois ícones SVG: o primeiro é estático com apenas o primeiro quadro da animação incluído e o segundo é o animado. Você pode encontrar o ícone estático no arquivo Sketch → Prancheta “exportar estático”. Nós o incluímos como um elemento SVG embutido no código. Também incluímos o SVG animado em linha, mas o ocultamos por padrão. Você pode conferir o código no download. Quando “Subscrever” recebe um clique, ocultamos o SVG estático e mostramos o animado, que inicia automaticamente.

Um pequeno ajuste que fizemos no SVG estático foi substituir esta linha:

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… com isso:

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

Isso removerá o retângulo cinza exibido incorretamente na parte superior de todos os elementos.

Este exemplo também mostra como os SVGs são bons em design responsivo: se você diminuir a janela, o layout será reorganizado e o ícone aumentará sem perda de qualidade.

Dica: Quando reduzimos o ícone, descobrimos que leva muito tempo para a folha sair da tela, então tivemos que voltar e editar um pouco esse tempo específico para torná-lo mais curto. Nós movemos os últimos keyframes Position de “sheet_top_bgr” e “sheet_top_content” para 3.2s para tornar o movimento mais rápido .

Se desejar, você pode ajustar a animação mesmo depois de exportá-la, mas é muito mais fácil fazer isso no SVGator, onde você terá a interface do usuário conveniente.

Conclusão

Estamos muito empolgados com ferramentas como o SVGator, que realmente aceleram o processo ao criar animações SVG simples. É fácil de usar e você pode obter uma animação de ótima aparência rapidamente.

• Não é tão poderoso quanto o Adobe After Effects, mas é muito mais adaptável e exporta tudo em código, pronto para uso na web. Compará-lo com o After Effects é maçãs e laranjas, porque ambas as ferramentas são muito diferentes.
• Ao usar o SVGator para explorações rápidas , os iniciantes verão maior valor nele, mas isso não significa que ele seja direcionado apenas a eles. Usuários avançados podem usar a ferramenta para fazer brainstorming ou explorar ideias rapidamente sem precisar usar uma ferramenta mais complexa. Como o SVGator gera código, você pode pegá-lo a partir daí e personalizar qualquer coisa da maneira que quiser. A única desvantagem é que toda a animação é colocada dentro de uma linha de tempo, o que significa que é basicamente uma animação CSS, e tudo o que acontece dentro dela tem um atraso diferente antes de ser acionado. Isso significa que você não pode disparar eventos em certas etapas da animação, porque tudo é CSS completo.
• Compará-lo com o código vanilla também não é justo, porque o principal objetivo do SVGator é tornar a animação SVG mais fácil e rápida. É claro que você pode conseguir mais se codificar tudo do zero, mas quanto tempo isso levaria?
• Uma das vantagens mais fortes do SVGator é que ele é muito amigável para iniciantes. Qualquer um pode começar a usá-lo, e a curva de aprendizado é quase nenhuma se você tiver experiência com pelo menos algum software de design ou animação.
• Todos os usuários recebem uma avaliação gratuita de sete dias assim que criam uma conta. Todos os recursos estão incluídos e, assim que o teste terminar, eles ainda poderão baixar as animações da seção “Meus projetos”. Você pode assinar o aplicativo mensalmente (US$ 18 por mês), trimestralmente (US$ 45 por trimestre) ou anualmente (US$ 144 por ano).

Leitura adicional sobre o SVGator

• Como animar SVG usando SVGator (vídeo)
• Twitter do SVGator (contém muitos mini-tutoriais e atualizações frequentes sobre o aplicativo)
• Perguntas frequentes sobre o SVGator

Leitura adicional sobre animação SVG usando código

• “Como parei de me preocupar e aprendi a animar SVG”, Boaz Lederer, Medium
• “Como otimizar o código SVG e animar um ícone SVG usando CSS e biblioteca Snap.svg,” CodyHouse
• “Animações CSS para não-desenvolvedores Parte 2 — SVGs”, Nicholas Kramer, Prototypr
• “Como criar belas animações SVG facilmente”, Lewis Menelaws, Medium

Um agradecimento especial a Boyan Kostov por nos ajudar com este artigo — agradecemos seu tempo e esforço!