As animações podem ser uma ótima maneira de melhorar a experiência do usuário em seu aplicativo React. Eles podem ajudar a tornar as interações mais suaves e também fornecer feedback visual ou chamar a atenção para um elemento específico.

Existem muitas maneiras de trabalhar com animações CSS usando o React, desde uma solução nativa até bibliotecas de terceiros.

Por que usar animações no React?

Existem muitas razões pelas quais você pode querer usar animações em seu aplicativo React. Alguns dos motivos mais comuns incluem:

  • Tornar as interações mais naturais. As animações podem ajudar a tornar as interações do usuário mais naturais e suaves. Por exemplo, se você estiver usando um componente de alternância, talvez queira animar o botão de alternância entre os estados "ligado" e "desligado". Outro exemplo são as barras de progresso, você pode criar uma barra de progresso animada para as páginas do seu aplicativo react.
  • Fornecimento de feedback visual. As animações podem fornecer feedback visual ao usuário. Por exemplo, se um usuário clicar em um botão, talvez você queira animar o botão para indicar que o aplicativo registrou essa ação.
  • Guiando a atenção do usuário. As animações podem direcionar a atenção do usuário para um determinado elemento. Por exemplo, se você tiver uma caixa de diálogo modal que aparece na tela, talvez queira usar uma animação para chamar a atenção do usuário para ela.
  • Criando um senso de urgência.Animações podem criar um senso de urgência ou importância. Por exemplo, se você tiver um componente de cronômetro em contagem regressiva, talvez queira usar a animação para refletir a urgência à medida que o prazo se aproxima.

Existem várias maneiras de adicionar animações aos componentes do React. Os três que você aprenderá a usar aqui são animações de estilo inline, a biblioteca react-animations e a biblioteca react-simple-animate.

Comece por criando um aplicativo react básico, então siga o método de sua escolha.

Método 1: Usando Animações de Estilo Inline

Por exemplo, digamos que você queira animar um componente para que ele desapareça quando você clicar em um botão. Você pode fazer isso com o seguinte código:

importar Reagir, {Componente} de 'reagir';
aulaDesvanecer-seestendeComponente{
construtor(adereços) {
super(adereços);


esse.estado = {
 é visível: falso
 };
 }


render() {
const estilos = {
opacidade: esse.estado.é visível? 1: 0,
 transição: 'opacidade 2s'
 };


retornar (
<div>
<div estilo={estilos}>
 Olá Mundo!
</div>
<botão onClick={this.toggleVisibility}>
 Alternar
</button>
</div>
 );
 }


alternarVisibilidade = () => {
esse.setState (prevState => ({
é visível: !estado anterior.é visível
 }));
 }
}
exportarpadrão Desvanecer-se;

Neste exemplo, um objeto de estilo tem propriedades de opacidade e transição. A opacidade é 0 quando o componente não está visível e 1 quando está. A propriedade de transição é “opacity 2s”, o que fará com que a opacidade mude em dois segundos quando mudar.

O botão alterna a visibilidade do componente. Quando alguém clica no botão, a variável de estado isVisible é atualizada e o componente aparece ou desaparece gradualmente, dependendo de seu estado atual.

Método 2: usando a biblioteca de animações de reação

Outra maneira de adicionar animações aos componentes do React é usar uma biblioteca como react-animations. Esta biblioteca fornece um conjunto de animações predefinidas que você pode usar em seus componentes React.

Para usar react-animations, primeiro você precisa instalar a biblioteca:

npm instalar animações de reação --salvar

Você também precisa instalar o aphrodite, que é uma dependência do react-animations:

npm instalar afrodite --salvar

Depois de instalar as bibliotecas, você pode importar as animações que deseja usar:

importar { fadeIn, fadeOut } de 'animações de reação';

Então, você pode usar as animações em seus componentes:

importar Reagir, {Componente} de 'reagir';
importar { Folha de estilo, css } de 'afrodite';
importar { fadeIn, fadeOut } de 'animações de reação';
const estilos = StyleSheet.create({
 aparecimento gradual: {
 animationName: fadeIn,
 duração da animação: '2s'
 },
 desaparecer: {
 animationName: fadeOut,
 duração da animação: '2s'
 }
});


aulaDesvanecer-seestendeComponente{
construtor(adereços) {
super(adereços);


esse.estado = {
 é visível: falso
 };
 }


render() {
const className = esse.state.isVisible? css (estilos.fadeIn): css (estilos.fadeOut);


retornar (
<div>
<div className={className}>
 Olá Mundo!
</div>
<botão onClick={this.toggleVisibility}>
 Alternar
</button>
</div>
 );
 }


alternarVisibilidade = () => {
esse.setState (prevState => ({
é visível: !estado anterior.é visível
 }));
 }
}
exportarpadrão Desvanecer-se;

Este exemplo começa importando as animações fadeIn e fadeOut da biblioteca react-animations. Em seguida, ele define um objeto de estilos com as animações fadeIn e fadeOut e animationDuration definido como dois segundos.

O botão alternará a visibilidade do componente. Quando alguém clicar nele, a variável de estado isVisible será atualizada e o componente aparecerá ou desaparecerá dependendo de seu estado atual.

Método 3: usando a biblioteca react-simple-animate

A biblioteca react-simple-animate fornece uma maneira simples de adicionar animações aos componentes React. Oferece uma API declarativa que facilita a definição de animações complexas.

Para usar a biblioteca, você precisa instalá-la primeiro:

npm instalar reagir-simples-animar --salvar

Então, você pode usá-lo em seus componentes:

importar Reagir, {Componente} de 'reagir';
importar { Animate, AnimateKeyframes} de "reagir-simples-animar";
aulaAplicativoestendeComponente{
 render() {
retornar (
<div>
<Animar
 jogar
começar={{
 opacidade: 0
 }}
fim={{
 opacidade: 1
 }}
>
<div>
 Olá Mundo!
</div>
</Animate>
<Animar Keyframes
 jogar
 duração={2}
 quadros-chave={[
 { opacidade: 0, transformar: 'traduzirX(-100px)' },
 { opacidade: 1, transformar: 'traduzirX(0px)' }
 ]}
>
<div>
 Olá Mundo!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exportarpadrão Aplicativo;

O Animar componente desaparece em um elemento div. Começa com uma opacidade de 0 e termina com uma opacidade de 1. A propriedade play é definida como true, o que fará com que a animação seja reproduzida automaticamente quando o componente for montado.

O Animar Keyframes componente anima um elemento div em dois segundos. A matriz de quadros-chave especifica os estados inicial e final da animação. O primeiro quadro-chave tem uma opacidade de 0 e um valor translateX de -100px. O segundo quadro-chave tem uma opacidade de 1 e um valor translateX de 0px.

Aumente o envolvimento do usuário com animações

Agora você conhece algumas maneiras de usar animações em seu aplicativo React. Você pode usar animações para aumentar o envolvimento do usuário com seu aplicativo.

Por exemplo, talvez você queira usar animação para recompensar o usuário por concluir uma tarefa. Isso pode ser algo tão simples quanto uma curta animação “spinner” ou uma animação mais complexa que é reproduzida quando o usuário completa um nível em um jogo.

Você também pode implantar seu aplicativo React na Web gratuitamente com serviços como páginas do Github ou Heroku.