Criando efeitos elásticos e de salto com animador expressivo — Smashing Magazine

No mundo do web design moderno, as imagens SVG são usadas em todos os lugares, desde ilustrações a ícones e efeitos de fundo, e são universalmente valorizadas por sua nitidez e tamanho leve. Embora as imagens SVG estáticas desempenhem um papel importante no web design, na maioria das vezes seu verdadeiro potencial é liberado apenas quando combinadas com movimento.

Poucas coisas acrescentam mais vida e personalidade a um site do que uma animação SVG bem executada. Mas nem todas as animações têm o mesmo impacto em termos de experiência digital. Por exemplo, efeitos elásticos e de salto têm um apelo único no motion design porque trazem um senso de realismo em movimentotornando as animações mais envolventes e memoráveis.

No entanto, qualquer pessoa que tenha mergulhado na animação de SVGs conhece os obstáculos técnicos envolvidos. A criação de um efeito elástico ou de salto convincente tradicionalmente requer o manuseio de quadros-chave CSS complexos ou a luta com bibliotecas de animação JavaScript. Mesmo ao usar um editor de animação SVG, provavelmente será necessário adicionar manualmente os quadros-chave e ajustar as funções de atenuação entre eles, o que pode se tornar um processo demorado de tentativa e erro, independentemente do nível de experiência que você tenha.

É aqui que o Expressive Animator brilha. Ele permite que os criadores apliquem efeitos elásticos e de salto em segundosevitando o tedioso trabalho de edição manual de quadros-chave. E o resultado é sempre excepcional: animações que parecem vivoproduzido com uma fração do esforço.

Usando o Expressive Animator para criar um efeito elástico

Criar um efeito elástico no Expressive Animator é extremamente simples, rápido e intuitivo, já que o efeito é integrado ao software como uma função de atenuação. Isso significa que você só precisa de dois quadros-chave (início e fim) para criar o efeito, e o software irá lidar automaticamente com o movimento elástico entre eles. Melhor ainda, a flexibilização elástica pode ser aplicada a qualquer propriedade animável (por exemplo, posição, escala, rotação, opacidade, metamorfose, etc.), proporcionando uma maneira consistente de adicioná-los às suas animações.

Antes de mergulharmos no tutorial, dê uma olhada no vídeo abaixo para ver o que você aprenderá a criar e todo o processo do início ao fim.

Primeiramente, vamos definir o cenário. Para isso, criaremos um novo projeto pressionando Ctrl/Comando + P e configurá-lo na caixa de diálogo “Criar novo projeto” que aparece. Para o tamanho do quadro, escolheremos 1080×1080, com duração de 00:01:30, e deixaremos a taxa de quadros permanecer inalterada em 60 quadros por segundo (fps).

Depois de clicar no botão “Criar projeto”, você pode usar as ferramentas Caneta e Elipse para criar a arte que será animada ou pode simplesmente copiar e colar a arte abaixo.

Agora que tudo está configurado, vamos criar a animação. Certifique-se de que o ajuste e a gravação automática estejam ativados e mova o indicador de reprodução para 01:00f. Ao ativar o encaixe, você poderá alinhar perfeitamente nós e objetos gráficos na tela. Por outro lado, como o nome sugere, a gravação automática rastreia cada alteração feita na arte e adiciona os quadros-chave apropriados na linha do tempo.

Pressione o UM no teclado para alternar para a ferramenta Nó, selecione o objeto String e mova sua alça para o ponto central direito da prancheta. Não se preocupe com a precisão, pois o encaixe fará todo o trabalho pesado para você. Isso dobrará a forma e adicionará quadros-chave para o animador Morph.

A seguir, pressione o V tecla no teclado para alternar para a ferramenta Seleção. Com esta ferramenta habilitada, selecione a Bola, mova-a para a direita e coloque-a no meio do barbante. Mais uma vez, o snap fará todo o trabalho pesado, permitindo que você posicione a bola exatamente onde deseja, enquanto a gravação automática adiciona automaticamente os quadros-chave apropriados.

Agora você pode reproduzir a animação e desativar a gravação automática clicando novamente no botão Gravação automática.

Como você pode ver durante a reprodução, a direção na qual os objetos String e Ball estão se movendo está errada. Felizmente, podemos corrigir isso facilmente apenas invertendo os quadros-chave. Para fazer isso, selecione os quadros-chave na linha do tempo e clique com o botão direito para abrir o menu de contexto e escolha Reverter. Isso inverterá os quadros-chave e, se você reproduzir a animação, verá que a direção agora está correta.

Com isso resolvido, podemos finalmente adicionar o efeito elástico. Selecione todos os quadros-chave na linha do tempo e clique no botão Atenuação personalizada para abrir uma caixa de diálogo com opções de atenuação. Na caixa de diálogo, escolha Elástico e defina as oscilações como 4 e a rigidez como 2,5.

É isso! Clique em qualquer lugar fora da caixa de diálogo de atenuação para fechá-la e reproduzir a animação para ver o resultado.

A animação também pode ser exportada. Imprensa Comando/Ctrl + E no teclado para abrir a caixa de diálogo de exportação e escolher entre várias opções de exportação, desde formatos vetorizados, como SVG e Lottie, até formatos rasterizados, como GIF e vídeo.

Para esta animação específica, escolheremos o formato de exportação SVG. Expressive Animator permite escolher entre três tipos diferentes de SVG, dependendo da tecnologia utilizada para animação: SMIL, CSS ou JavaScript.

Cada uma dessas tecnologias tem diferentes pontos fortes e fracos, mas para este tutorial escolheremos SMIL. Isso ocorre porque as animações baseadas em SMIL são amplamente suportadas, mesmo em navegadores Safari, e podem ser usadas como imagens de fundo ou incorporadas em páginas HTML usando o marcação. Na verdade, Andy Clarke escreveu recentemente tudo sobre animações SMIL aqui na Smashing Magazine se você quiser uma explicação completa de como funciona.

Você pode visualizar o SVG exportado na seguinte demonstração do CodePen:

Animador expressivo para salto e outros efeitos

Adicionar um efeito de salto a uma animação é muito semelhante ao processo que acabamos de abordar para criar um efeito elástico, uma vez que ambos são incorporados ao Expressive Animator como funções de atenuação. Assim como o elástico, a suavização de salto pode ser aplicada a qualquer propriedade animável, oferecendo maneiras rápidas de criar movimentos realistas.

Além desses dois efeitos, o Expressive Animator também oferece outras opções de atenuação que podem moldar a personalidade da sua animação, como Voltar, Passos, Sinc, só para citar alguns.

Conclusão

Os efeitos elásticos e de ressalto estão há muito tempo entre as técnicas mais desejáveis, mas demoradas, no design de movimento. Ao integrá-los diretamente em suas funções de atenuação, o Expressive Animator elimina a complexidade da manipulação manual de quadros-chave e transforma o que costumava ser um desafio técnico em uma oportunidade criativa.

A melhor parte é que começar a usar o Expressive Animator não apresenta risco. O software oferece um período completo de 7 dias teste gratuito sem exigir uma contapara que você possa baixá-lo instantaneamente e começar a experimentar seus próprios designs imediatamente. Após o término da avaliação, você poderá comprar o Expressive Animator com pagamento único, nenhuma assinatura necessária. Isso lhe dará uma licença perpétua que abrange Windows e macOS.

Para ajudá-lo a começar ainda mais rápido, preparei alguns recursos extras para você. Você encontrará os arquivos de origem das animações criadas neste tutorial, juntamente com uma lista selecionada de links úteis que o guiarão ainda mais na exploração do Expressive Animator e da animação SVG. O objetivo desses materiais é fornecer um ponto de partida sólido para que você possa aprender, experimentar e construir por conta própria com confiança.