loading...

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

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

Site da Flare
Quer fazer animações escrevendo o mínimo de código o possível ? Bora fazer isso utilizando a Flare, uma poderosa ferramenta de animação!

Configurando o projeto

  • Crie uma conta gratuita no site 2Dimensions clicando aqui.
  • Baixe o ícone do android clicando aqui. O arquivo precisa estar em svg (ou em PSD, mas não trabalharemos com esse formato nesta postagem) Créditos ao autor: Feito por Freepik e baixado no site Flaticon
  • Inicie um projeto em Flutter (na sua IDE favorita).

Sobre a ferramenta Flare

Antes de começarmos a animar o nosso modelo, permita-me explicar algumas coisas sobre a ferramenta em questão.

Criar animações

Clique em “Your files” > New Flare. Na próxima tela, marque a animação como pública, uma vez que mantê-la privada requer pagamento.
“Your files” está localizado no canto superior direito da tela

Lembre-se de marcar a opção “Public”

Tela inicial

Tela inicial
Essa é a tela inicial. Numerei profissionalmente (pelo paint XD) alguns pontos para explicar melhor como funciona.
1- Design: é a parte onde se vê todos os arquivos presentes na tela de arte.
2- Animate: é sessão onde a animação é criada.
3- Hierarchy: é a sessão onde se vê a hierarquia dos assets no artboard.
4- Draw Order: mostra somente as formas e imagens que estão sendo trabalhadas. Elas são organizadas por profundidade de renderização.
5- Assets: itens adicionados ao seu projeto (imagens, por exemplo).
6- Transform tools: ferramentas que permitem modificar propriedades da imagem, como Translates, Rotate, Scale etc.
7- Create tools: ferramentas que permitem a criação de novas formas.
8- Nível de zoom na tela.
9- Opções de visibilidade
10- Configurações do projeto
11- Exportar/ baixar arquivo
12- Propriedades do objeto selecionado
13- Stage: onde os designs e as animações são renderizadas
14- Título do documento

Animations

Timeline e menu de animações
1- Iniciar a animação atual.
2- Voltar ao início da animação
3- Autokey: com essa opção habilitada, qualquer alteração feita em um objeto entra automaticamente na timeline no momento em que se está.
4- Show selected: quando habilitada, mostrará somente os objetos selecionados.
5- Loop: habilite-a para fazer a animação rodar em loop.
6- Work area: habilite-a para trabalhar sobre uma parte específica da animação.
7- Objetos.
8- Título da animação.
9- Momento no qual se está trabalhando (indicado pela linha azul).
10- Taxa de quadros por segundo (FPS).
11- Duração da animação.
12- Timeline.
Por fim, a imagem abaixo evidencia o nome da animação. Para trocá-lo, basta clicar duas vezes nele.

Nome da animação

Como essa postagem ficou muito longa, faremos a animação na próxima postagem!

Discussion

pic
Editor guide