loading...

Flutter — animação simples com Flare — Parte 2

lukesilva_dev profile image 🐙 Lukão 🐙 ・2 min read

Parte do site da Flare

A animação que criaremos será a seguinte:

Android movendo a cabeça

Por mais simples que ela seja, pode servir como base para animar ícones de menu, SplashScreens, criar jogos com a Flame etc.

Criando a animação

Comece importando o objeto. Para tanto, você pode clicar no botão “import” no canto inferior esquerdo, ou simplesmente arrastar o svg para a tela. Ele ficará em “Assets”.

Objetono campo "assets"

Arraste-o para o centro da tela (dentro do artboard). Na aba “hierarchy”, é possível observar todas as partes do svg. Alguns nodes não possuem “shapes”, então pode excluí-los (para acompanhar este tutorial). Clique em “android” (ou o nome do arquivo conforme o salvou em sua máquina) e configure as seguintes posições: Position X: 261.73 e Position Y: 212.40

Alguns nodes com shapes

Clique em “Animate” para iniciar a movimentação android. Depois, clique na cabeça dele e, no menu lateral direito, clique nos losangos próximos a rotation, position x e position y.

Se tudo foi seguido corretamente, você verá que a forma foi adicionada à timeline no momento 0.

Animation

Ao lado de FPS, mude o tempo da animação para 00:02:00 (2 segundos).
Na timeline, clique em 01:00f para adicionar a mudança que você deseja que ocorra após 1 segundo do início da animação.
Para deixar a aplicação conforme a gif, em 1 segundo, coloque os seguintes valores no menu lateral:

Configuração da cabeça em 1s — Position X: 256, Position Y: 88.71, Rotation: -90°

E no tempo 2s, configure da seguinte forma:

Configuração da cabeça em 2s — Position X: 256, Position Y: 88.71, Rotation: -360°

Por fim, abaixo das configurações da forma, em”Key interpolation”, selecione o tipo “cubic”. Aperte play para verificar se a animação ficou conforme o desejado. Faça ajustes finais, não esqueça de renomear o arquivo e a animação, e então clique no ícone ao lado da engrenagem, e então “export”. Deixe no formato “binary” e clique no botão “export”.
Na última parte da postagem, finalmente colocaremos a animação dentro de um projeto Flutter !

Discussion

pic
Editor guide