2

Creating animations with React Native

 2 years ago
source link: https://reactnativeexample.com/creating-animations-with-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Animation

Creating animations with React Native

May 29, 2022 3 min read

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

šŸ’» Autor

Feito com šŸ’œ by Rodrigo Rael

GitHub

View Github


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK