Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: personalize apps com animações

React Native: personalize apps com animações

Entendendo as animações - Apresentação

Olá, seja muito bem-vindo a mais um curso de React Native da Alura. Eu me chamo André Cunha e nesse curso nós vamos aprender sobre animações. E você pode estar se perguntando: “para que eu devo utilizar animações?”, “quais são as vantagens?”, “que tipos de animações eu vou aprender?”.

Saiba que as animações são uma excelente forma de interação com o usuário, tanto para indicar uma determinada ação que ele deve fazer em nosso aplicativo, quanto, também, fornecer um feedback caso algo esteja carregando.

Mas o que vamos fazer especificamente nesse curso? Esse é o AluraMed, ele é o aplicativo de consultas médicas que vamos utilizar como projeto nesse curso. A ideia é aplicar diversas animações em determinadas áreas, determinadas telas e componentes desse aplicativo.

Uma das animações que vamos fazer é o Carrossel. Perceba que algumas imagens estão sendo exibidas na tela principal automaticamente e em loop, então isso já dá uma animação para o nosso aplicativo e o deixa muito mais vivo que um aplicativo estático.

Outra animação que vamos fazer é uma suavização na transição entre uma tela ou uma determinada informação que vai ser exibida. Perceba que ao clicar no botão “Começar” vão aparecer alguns inputs, só que eles não vão aparecer instantaneamente, eles vão aparecer de forma linear, de uma forma mais suave.

Vou clicar no botão “Começar”. Perceba que os inputs apareceram e não foram instantâneos. Isso dá uma experiência para o usuário muito mais agradável de se usar esse aplicativo.

Ao clicar no botão “Entrar”, perceba que temos um efeito de carregamento um pouco diferente. Esse efeito de carregamento, nós vamos ver que ele fornece para o usuário uma sensação muito melhor do que um carregamento simples de loading. Vamos entender porque ele é utilizado em empresas como o Facebook, Netflix, YouTube e até o mais famoso, que é o Instagram.

Ao lado temos a tela de exibição das consultas médicas. Temos os cards dos pacientes, e ao clicar em algum card de paciente, vamos para a tela de “Detalhes”, onde vamos aplicar mais uma animação, no botão de “Notificar consulta”. Perceba que nós temos um sino no botão, e ao clicar no botão esse sino sofre uma animação de balanço e depois ele é preenchido.

E uma outra animação que vamos ver ao longo desse curso é a primeira coisa que é exibida quando entramos no aplicativo, que é a chamada Splash Screen. Vamos entender o que é Splash Screen, mas perceba que, ao carregar a nossa aplicação – vou dar um reload nela – vai ser exibida a logo do AluraMed, só que ela vai aparecer com uma animação.

Veja que a logo apareceu e, logo em seguida, apareceu a tela de onboarding, que é a tela de exibição de informação. Só que as imagens e textos não apareceram instantaneamente, elas tiveram uma suavização e depois se estabilizaram.

Então é isso. Vamos ver algumas animações, vamos aprender a utilizar diversas bibliotecas para aplicar outras animações também. Espero que você tenha ficado curioso e saiba também que essas animações deixam o nosso aplicativo com uma sofisticação e uma experiência para o usuário bem melhor do que o aplicativo simples e sem animação.

Espero que você tenha ficado empolgado e queira saber como fazer isso. Nos vemos nesse curso.

Entendendo as animações - Para que servem as animações?

Olá, seja bem-vindo a mais um curso de React Native da Alura. Nesse curso nós vamos aprender sobre animações. Afinal de contas, o que são animações?

Imagine que você abriu um aplicativo e você se deparou com uma tela preta ou uma tela em branco, que ficou por muito tempo. Automaticamente você pode pensar que esse aplicativo não está funcionando corretamente. Então isso pode causar uma sensação para você, ou para qualquer usuário que está usando esse aplicativo, de que ele está bugado ou nem funciona.

Mas na verdade, o que está acontecendo é: ele está carregando ainda. E por ter uma demora e ficar uma tela que não muda sua aparência, pode causar a impressão para o usuário de que ela não está funcionando e que o aplicativo não está funcionando corretamente. E como que podemos resolver isso? Aplicando uma animação.

Um simples “loanding”, que é esse círculo girando na tela, pode mostrar ao usuário que as informações estão sendo carregadas. Isso pode passar a sensação para ele de que “ok, vou aguardar, porque as informações ainda vão chegar”.

Então as animações podem nos ajudar em algumas situações, como por exemplo na atualização de estados. Imagine que o seu app muda de modo claro para modo escuro, podemos, por exemplo, fazer uma chave que mostra intuitivamente para o usuário em qual estado que ele está.

Então estamos vendo que quando está no modo claro ele fica com uma imagem de dia, e quando está no modo escuro, a chave, o switch, fica de noite, em formato de lua, no modo escuro. Então é uma animação simples que deixa intuitivo o que está acontecendo no estado da nossa aplicação.

Também temos as animações que podem chamar a atenção do usuário. Imagine que o seu app tem várias telas e ele tem aquela navegação na parte de baixo, chamada de botton.

Então podemos fazer com que, ao clicar em determinada parte da navegação, você indique, por meio de uma animação, por exemplo, que ele está na tela “Home”. Então o usuário sabe que ele vai estar na tela principal, na tela “Home”, e isso chama a atenção dele. Ele vai saber que está na tela correta ou não. Então é uma forma de manter o foco do usuário em uma determinada parte ou região da tela.

Sem falar que a animação pode proporcionar um alívio para o usuário. Então às vezes ele clicou num botão de “Finalizar compra”, só que o botão não alterou o estado dele, ou nada aconteceu na tela. Ele pode pensar que ele não apertou corretamente, ou o aplicativo travou, ou o celular dele travou.

Agora se ele tem um feedback de que está carregando a informação, por exemplo, se o botão começar a piscar ou gira, igual está nessa animação, o usuário vai ter uma sensação de alívio, que ação dele foi feita, agora basta apenas ele aguardar finalizar.

Então por que devemos utilizar as animações? Vamos listar: primeiro nós vimos que a atualização de um estado do aplicativo é uma boa para utilizar animação. Temos também para atrair a atenção do usuário, proporcionar um feedback da ação do usuário com uma resposta do nosso aplicativo, por meio de uma animação. Também temos a melhora na navegação entre as telas ou componentes que o aplicativo vai fazer quando o usuário interagir com ele, proporciona uma sensação de alívio também e pode ensinar interações dentro do nosso app por meio de animações.

Imagine que, por exemplo, um usuário foi preenchendo algumas informações e, ao preencher, uma animação pode aparecer indicando que ele deve clicar em uma determinada área da tela, ou ele deve preencher alguma informação que está faltando.

Então, por meio de animações simples, nós podemos indicar para o usuário qual é o próximo passo que ele deve fazer. E isso pode acontecer de forma natural, que ele nem perceba, mas que deixe nosso aplicativo muito mais redondo e com um refinamento muito maior.

Então vamos às vantagens de se usar uma animação ou animações dentro de um aplicativo: nós deixamos nossa aplicação mais intuitiva e melhora a credibilidade dela. Comecem a perceber em aplicativos que usamos no nosso dia a dia, aplicativos grandes como Instagram, Facebook, ou aplicativo de compra, como o Nubank, você vai ver que todos esses costumam ter animações dentro deles.

Por exemplo, quando você finaliza uma compra do Nubank, você consegue perceber que ele faz uma animação de que a compra foi feita com sucesso, e isso é tão natural que nem percebemos.

E as animações fazem com que as aparências do nosso aplicativo fiquem bem mais refinadas, mas existem algumas desvantagens: isso pode exigir um pouco mais do processamento do celular. Então dependendo a animação que você aplique, pode ser que o aplicativo fique um pouco mais lento, já que ele exige mais da memória RAM do celular ou do processamento no geral.

Também a forma que você utiliza uma animação, dependendo se ela for muito longa, pode prejudicar a experiência do usuário. Imagine esse exemplo do Nubank, que você finalizou a compra.

Uma compra ocorre bem rápido, você finaliza a compra e ela é basicamente instantânea. Mas imagine que a animação do Nubank de que a compra foi finalizada demore 30 a 40 segundos, você vai pensar que o aplicativo é muito lento, e isso pode ser meio ruim para a experiência do usuário. E ele pode pensar “esse aplicativo é muito lento, vou usar o outro, que é mais rápido”. E não queremos que isso ocorra.

Então devemos aplicar animações de forma que elas fiquem intuitivas e que o usuário mal perceba, que fique natural.

E como que podemos fazer aplicações com animações no React Native? Existem algumas bibliotecas e recursos que vamos utilizar nesse curso. Existem outras, só que as principais serão abordadas aqui.

Uma delas são a Animated API e LayoultAnimated, do próprio React Native. São recursos e bibliotecas nativas do React Native, então não vamos precisar baixar nada externo, e elas proporcionam uma gama de possibilidades para fazer animações.

Mas também vamos usar a React Native Reanimated. Essa é uma biblioteca externa, só que ela é muito famosa na comunidade, e ela consegue suprir algumas deficiências que a biblioteca nativa do React Native não tem. Por isso vamos usá-la em uma determinada parte da nossa aplicação e ver como ela é, como ela funciona, se ela é simples, se ela é muito mais difícil que a nativa do React Native. Por isso vamos utilizá-la.

Tem também a Lottie, que é um recurso que já tem muitas animações disponíveis, nós basicamente só pegamos essa animação pronta e usamos no nosso aplicativo. Então ela é muito utilizada tanto em aplicativos web, quanto mobile, por isso vamos utilizá-la.

E claro, também vamos utilizar o CSS e o JavaScript para fazer animações. Vamos conseguir ver que não precisamos ter nenhuma biblioteca nativa, nem baixar uma biblioteca externa, para fazer uma animação. Com o próprio CSS e o JavaScript conseguimos fazer isso também.

No próximo vídeo nós vamos, de fato, ver como é o nosso projeto base e logo em seguida aplicar algumas animações. Nos vemos lá.

Entendendo as animações - O projeto

Agora que já entendemos as vantagens de usar animações em um aplicativo mobile, vamos ver o projeto base que usaremos nesse curso?

Esse é o AluraMed, o aplicativo que vamos usar nesse curso, e o projeto base dele vai ser fornecido por meio de link do GitHub para vocês, para vocês poderem baixar e executar no computador enquanto estivermos vendo esse curso.

O projeto foi feito em Expo, para facilitar o nosso lado da programação e já começar direto, sem ter que configurar muito o nosso ambiente, o nosso setup. Mas saiba que as animações que usaremos aqui funcionam tanto para React Native CLI, quanto para o Expo, então vamos usar o Expo para agilizar o nosso processo.

Dito isso, vamos ver o código que foi fornecido no projeto base. Se abrimos o nosso “App.js”, na coluna do "EXPLORADOR", à esquerda, vamos ver que basicamente ele está encurtando as rotas da nossa pasta “src”. Então abrindo a pasta “src”, percebemos que temos as rotas e as rotas são onde estão configuradas nossas telas do aplicativo. Temos 3 telas principais: a tela "Onboarding", a "Principal" e a "Detalhes".

Ao longo do curso talvez criemos uma nova tela, mas por enquanto são essas 3 que são fornecidas no projeto base.

A tela Onboarding é a tela que está sendo exibida no nosso emulador, é a tela de informações gerais no nosso aplicativo, é a primeira tela que vai ser exibida ao entrar no aplicativo. Então temos informações como: “Gerencie suas consultas”, temos também o desenho de uma médica segurando alguns cards, e basicamente são essas informações que temos no onboarding.

Temos a tela Principal e a tela de Detalhes, que veremos com mais detalhes o código delas. Então clicando na pasta “Telas” e indo para a tela de “Onboarding”, percebemos que tem 3 arquivos dentro: o arquivo “cards.js”, o arquivo “index.js” e o arquivo “styles.js”.

O arquivo "cards.js" é basicamente o objeto que contém 3 imagens, que são esses cards que estão sendo exibidos em cima da mão da médica, no desenho da tela de Onboardig. Então vamos basicamente exportar essas imagens para usar dentro do “index.js”. Nosso “index.js” é o arquivo principal da tela, e temos também o arquivo “styles.js”, que contém os estilos dessa tela.

Basicamente nós percebemos que, nessa tela, nós temos uma função “Avançar”, que é para você avançar dessa tela para a tela principal e temos também uma tela de fundo, que nada mais é que uma view, que vai conter uma imagem como tela de fundo, essa view mais estilizada com essa tela de fundo. Isso foi feito com base naquele mocap que vimos no vídeo anterior.

Temos também a imagem do AluraMed, que é uma logo no canto superior esquerdo do aplicativo, e, basicamente, temos uma FlatList que está renderizando os itens, e os itens são esses 3 cards em cima da mão da médica.

Vimos também, dentro dessa tela, que tem um card chamado “FundoOndulado”. Esse “FundoOndulado” é esse fundo branco meio ondulado na metade inferior da tela, que contém as informações dentro, como “Gerenciar as suas consultas”.

E também temos alguns formulários e um botão para começar. Ao clicar no botão “Começar” nós percebemos que essa parte ondulada se expande e exibe algumas informações, como os inputs para e-mail e senha.

Esses inputs nós percebemos que estão dentro de Formulario, que está na linha 54 do "index.js" do Onboarding. Formulario é um card que foi feito dentro da pasta “Componentes”, que basicamente vai conter esses dois inputs de e-mail e senha.

Ao clicar no botão “Entrar novamente”, nós vamos para a tela principal. Então vamos fechar os arquivos e vamos acessar "src > Principal > index.js".

Na tela principal, novamente nós percebemos que tem algumas importações de componentes, que foram criadas, esses componentes do CardConsulta , temos a TelaDeFundo também, e por aí vai.

Vimos que, basicamente, exibimos as informações do usuário, onde está escrito “Olá Sônia” com “Mais 4 consultas hoje”. Temos também uma FlatList, que está carregando uma lista de pacientes. Essa lista de pacientes está também dentro da pasta principal, e nós percebemos que nada mais é do que um vetor de objetos, que contém as informações de cada card que está sendo exibido nessa tela.

Fique à vontade se você quiser alterar para informações de usuários ou pacientes que você desejar colocar como informação.

Voltando para a tela principal, percebemos que basicamente é isso que está sendo exibido, com uma grande exceção de que dentro do card ele está por volta de um TouchableOpacity, que, ao clicar, ele navega para uma tela, a tela de “Detalhes”, onde vão ser exibidos os detalhes daquele paciente. Então vamos clicar na paciente “Larissa Santana”, e percebemos que fomos para uma terceira tela, a tela de detalhes.

Vamos fechar então os arquivos da tela principal e vamos acessar "src > Detalhes > index.js". Nós percebemos que na tela de detalhes nós também temos uns componentes sendo exibidos e importados, mas basicamente nós também temos a tela de fundo, aquela tela mais estilizada, temos as informações das anotações do paciente sendo exibidas e temos um mapa.

Esse mapa nada mais é do que uma imagem que está sendo exibida como um mapa, não é um mapa de verdade. E temos o botão de notificar consulta. Esse botão é um Touchable Opacity, que basicamente tem um texto e tem um ícone dentro. Se nós clicamos nele, por enquanto, nada está acontecendo. Podemos voltar para a tela principal, exibindo os outros usuários da mesma forma.

Então o projeto base contém essas informações. Se abrirmos a pasta de componentes, vamos perceber que alguns componentes já foram criados: temos o “CardConsulta” que vai conter informações gerais dos usuários.

Temos o “Formulario”, que basicamente são aqueles dois inputs da tela principal, que tinha o e-mail e a senha. Temos o componente de “FundoOndulado”, que também era daquela tela onboarding, que tinha o fundo branco, e basicamente está sendo importado um SVG, que é um tipo de imagem, que está exibindo aquele fundo daquela forma.

E também temos aquelas “InformacoesUsuario”, que é onde está escrito “Olá Sônia”, “Mais 4 consultas hoje”, na parte superior do aplicativo. Então é um componente bem simples, tem uma view, uma imagem e texto.

E por fim, temos também a tela de fundo, que é uma tela que vai conter uma imagem de fundo. Essa imagem foi fornecida naquele mocap que vimos no vídeo anterior, e basicamente ela está sendo usada como uma view em todas as telas, então a utilizamos só para estilizarmos o nosso app.

Então esse é o projeto base que usaremos. Agora que já vimos com mais detalhes o que possui nesse aplicativo, nos próximos vídeos vamos, de fato, começar a implementar animações nele. Então ficamos por aqui e nos vemos logo.

Sobre o curso React Native: personalize apps com animações

O curso React Native: personalize apps com animações possui 121 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas