Minha experiência aplicando motion design básico em curto tempo
Essa semana me propus a estudar um pouco mais sobre animações em interfaces e como criar animações básicas no Haiku Animator. Estudo design mas nunca tinha feito animações antes, apenas estudado um pouco sobre elas e a importância delas principalmente no âmbito UI/UX. Em interações entre telas ou em pequenos detalhes de um app, as animações desenvolvem um papel muito importante para manter a atenção do usuário e cativá-lo, além de solucionar eventuais problemas no design de um produto.
O Haiku Animator é um programa que junta design e código para criar animações em sites e apps. Ele é compatível com o Illustrator, Figma e Sketch, e, por essa razão, e também por ser um programa bastante intuitivo, optei por utilizá-lo no lugar do After Effects.
Começando pelo clássico
Para começar a praticar, Desenhei no Sketch uma bolinha e uma sombra e exportei esses assets para o Haiku Animator e os posicionei na tela.
Depois disso, em 0f posicionei a bolinha um pouco acima da sombra para depois colocá-la novamente junto da sombra em 50f.
No 100f a bolinha foi colocada da mesma forma que no começo, isso para que fosse criado um loop entre o início e o fim da animação. À partir disso já dá para ter uma ideia de movimento.
Na curva entre 0f e 50f, um Tween que funciona bem é o ease in cubic. Entre 50f e 100f, o ease out cubic é o que se adequa melhor.
Depois de adicionar essas transições, em 0f a sombra da bola é colocada na opacidade 0, em 30f é colocada em 0.5 e em 50f é colocada em 1. em 70f a opacidade é colocada em 0.5 novamente e em 100 a opacidade é 0. Tudo isso para criar uma ideia de identificação do objeto. A bola também é levemente achatada em 50f e volta ao normal em 100f.
No final, sua animação deve ficar assim:
Depois de pronto é possível publicar sua animação em diversos formatos como web, mobile, gif e vídeo!
Aplicando de outras formas
Depois de fazer a primeira animação, comecei a pensar de que outras formas eu poderia praticar motion design como iniciante. À partir disso, comecei a pesquisar mais sobre microinterações e como elas podem melhorar (ou piorar, quando não bem pensadas) o seu projeto a depender do intuito do uso, do tempo de duração e da forma que a interação é disposta na tela.
Criei no Sketch um projeto com uma tela para testar uma interação:
O Sketch já possui algumas possibilidades de transição entre telas, por isso, decidi tentar criar uma microinteração de curtida no Haiku.
Mais uma vez, a animação é quebrada em duas partes, existindo entre elas um meio-termo para que exista uma certa fluidez na transição.
Para que exista ainda mais fluidez, o preenchimento em 0f é colocado em opacidade 0, em 15f é colocado em 0.6 e em 30f é colocado em 1.
E tcharam! Só publicar que já está pronto para colocar no seu código:
Algumas considerações finais
Dedicar essa semana ao estudo de algo novo foi uma experiência bastante gratificante, principalmente considerando que sempre tive a impressão de que motion design seria algo extremamente complicado para mim. Na verdade o processo me trouxe bastante divertimento e a sensação de que eu poderia ter tentado antes em pequenos passos (da mesma forma que fiz agora).
Existem várias ferramentas disponíveis para criar animações e para essa primeira tentativa, o Haiku funcionou muito bem para mim. Pretendo futuramente testar outras, mas no geral, atendeu todas as minhas expectativas de iniciante.
Muito obrigada pela sua leitura! Meu nome é Marina Savluchinske e sou estudante na Apple Developer academy — UFPE.
