Demo

Gif animated

ūüďÉ Projeto

Fazendo anima√ß√Ķes no react-native. Utilizando o Reanimated V2 Veja mais sobre essa ferramenta E o Moti, ele usa o Reanimated por baixo dos panos mas o Moti foi criado tendo como inspira√ß√£o de como as anima√ß√Ķes s√£o feitas na web Veja mais dessa ferramenta

Esse App implementa uma técnica de memorização que é chamada de repetição espaçada, ela é muito comum essa técnica ser utilizada para estudos, quando você tem que memorizar aluma coisa. A repetição espaçada funciona com cards, na frente do card tem a pergunta ou frase, e no verso tem a resposta ou frease em outro idioma, a ideia é você ir todos os dias no app e tentar adivinhar, tentar lembrar qual é a resposta do card, o que tem no verso do card.

Anima√ß√Ķes n√£o √© s√≥ visual!! Anima√ß√£o n√£o √© s√≥ um recurso visual, anima√ß√£o n√£o √© s√≥ uma coisa para deixar o app mais bonito, anima√ß√£o n√£o √© s√≥ para mostrar que voc√™ sabe fazer anima√ß√Ķes. A anima√ß√£o tem 4 pilares e com esses pilares voc√™ deve analisar se faz sentido usar anima√ß√£o nos seus APPs, por que deve se ter um cuidado com o excesso de anima√ß√Ķes.

1¬ļ pilar: anima√ß√£o tem que ter um apelo visual, esse apelo visual √© para deixar geralmente a aplica√ß√£o mais moderna.

2¬ļ pilar: anima√ß√£o deve ter um aspecto funcional, anima√ß√£o tem que ter o prop√≥sito de dar feedback e visibilidade do estatos do sistema pro usu√°rio, ou seja, anima√ß√£o tamb√©m √© um recurso para mostrar para o usu√°rio que alguma coisa aconteceu em decorrer de uma a√ß√£o do usu√°rio, n√£o do nada. um exemplo disso √© quando voc√™ est√° logando na aplica√ß√£o e aparece um active indicator de loading, voc√™ est√° dizando para o usu√°rio que est√° carregando, √© super simples mas √© extremamente importante para usabilidade.

3¬ļ pilar: tem aspecto de visibilidade, a anima√ß√£o pode tamb√©m ser utilizada como uma estrat√©gia de interatividade para o usu√°rio sentir que quando ele faz alguma coisa acontece uma responsta, e tamb√©m a anima√ß√£o pode ser utilizada como uma estrat√©gia para guiar o usu√°rio, para voc√™ levar o usu√°rio de um ponto para o outro. Por exemplo: barra de progresso vai levar o usu√°rio de um ponto para o outro, est√° mostrando para o usu√°rio quanto tempo falta para ele terminar, se esta acabando, se falta muito. S√£o simples detalhes mas que trazem conforto para o usu√°rio. Por exemplo: o usu√°rio est√° usando o app enquanto ele espera alguma coisa, a barra de progresso pode ser uma √≥tima estrat√©gia para ele saber se d√° tempo de terminar ou se √© melhor ele continuar depois, e a anima√ß√£o aplicada a barra traz a sensa√ß√£o de progresso, de movimento.

4¬ļ pilar: aspecto de desempenho, tem que tomar cuidado com anima√ß√Ķes para a sua aplia√ß√£o ser aquela que fica com muita anima√ß√£o e comprometer o desempenho dela.

ūüöÄ Tecnologias/Bibliotecas utilizadas

TypeScript React-Native Expo Reanimated Moti

ūüíĽ Autor

Feito com ūüíú by Rodrigo Rael

Linkedin Rodrigo Gmail Rodrigo

GitHub

View Github