Las animaciones pueden ser una excelente manera de mejorar la experiencia del usuario de su aplicación React. Pueden ayudar a que las interacciones se sientan más fluidas y también pueden proporcionar comentarios visuales o llamar la atención sobre un elemento en particular.

Hay muchas maneras de trabajar con animaciones CSS utilizando React, desde una solución nativa hasta bibliotecas de terceros.

¿Por qué usar animaciones en React?

Hay muchas razones por las que podría querer usar animaciones en su aplicación React. Algunas de las razones más comunes incluyen:

  • Hacer que las interacciones se sientan más naturales. Las animaciones pueden ayudar a que las interacciones de los usuarios se sientan más naturales y fluidas. Por ejemplo, si está utilizando un componente de alternancia, es posible que desee animar el botón de alternancia entre los estados "activado" y "desactivado". Otro ejemplo son las barras de progreso, puede crear una barra de progreso animada para las páginas de su aplicación de reacción.
    • instagram viewer
  • Proporcionar retroalimentación visual. Las animaciones pueden proporcionar información visual al usuario. Por ejemplo, si un usuario hace clic en un botón, es posible que desee animar el botón para indicar que la aplicación ha registrado esa acción.
  • Orientar la atención del usuario. Las animaciones pueden guiar la atención del usuario hacia un elemento en particular. Por ejemplo, si tiene un cuadro de diálogo modal que aparece en la pantalla, es posible que desee utilizar una animación para llamar la atención del usuario.
  • Creando un sentido de urgencia.Las animaciones pueden crear una sensación de urgencia o importancia. Por ejemplo, si tiene un componente de temporizador que está realizando una cuenta regresiva, es posible que desee utilizar una animación para reflejar la urgencia a medida que se acerca la fecha límite.

Hay varias formas de agregar animaciones a los componentes de React. Los tres que aprenderá a usar aquí son animaciones de estilo en línea, la biblioteca de animaciones de reacción y la biblioteca de animación de reacción simple.

Empezar por crear una aplicación de reacción básica, luego siga el método de su elección.

Método 1: uso de animaciones de estilo en línea

Por ejemplo, supongamos que desea animar un componente para que se desvanezca al hacer clic en un botón. Puedes hacer esto con el siguiente código:

importar Reaccionar, {Componente} de 'reaccionar';
claseFadeInOutextiendeComponente{
constructor(accesorios) {
súper(accesorios);


este.estado = {
 es visible: FALSO
 };
 }


prestar() {
constante estilos = {
opacidad: este.estado.es visible? 1: 0,
 transición: 'opacidad 2s'
 };


devolver (
<división>
<estilo div={estilos}>
 ¡Hola Mundo!
</div>
<botón onClick={this.toggleVisibility}>
 Palanca
</button>
</div>
 );
 }


alternarVisibilidad = () => {
este.setState (prevState => ({
es visible: !estado anterior.es visible
 }));
 }
}
exportarpor defecto fundido de entrada y salida;

En este ejemplo, un objeto de estilo tiene propiedades de opacidad y transición. La opacidad es 0 cuando el componente no es visible y 1 cuando lo es. La propiedad de transición es "opacity 2s", lo que hará que la opacidad cambie durante dos segundos cuando cambie.

El botón alterna la visibilidad del componente. Cuando alguien hace clic en el botón, la variable de estado isVisible se actualiza y el componente aparecerá o desaparecerá dependiendo de su estado actual.

Método 2: usar la biblioteca de animaciones reactivas

Otra forma de agregar animaciones a los componentes de React es usar una biblioteca como react-animations. Esta biblioteca proporciona un conjunto de animaciones predefinidas que puede usar en sus componentes de React.

Para usar animaciones reactivas, primero deberá instalar la biblioteca:

npm instalar reaccionar-animaciones --ahorrar

También necesitas instalar aphrodite, que es una dependencia de las animaciones de reacción:

npm instalar Afrodita --ahorrar

Una vez que haya instalado las bibliotecas, puede importar las animaciones que desea usar:

importar {desvanecerse, desvanecerse} de 'reaccionar-animaciones';

Luego, puede usar las animaciones en sus componentes:

importar Reaccionar, {Componente} de 'reaccionar';
importar { Hoja de estilo, css } de 'Afrodita';
importar {desvanecerse, desvanecerse} de 'reaccionar-animaciones';
constante estilos = StyleSheet.create({
 fundirse: {
 nombre de animación: fundido de entrada,
 duración de la animación: '2s'
 },
 desvanecerse: {
 nombre de animación: desvanecimiento,
 duración de la animación: '2s'
 }
});


claseFadeInOutextiendeComponente{
constructor(accesorios) {
súper(accesorios);


este.estado = {
 es visible: FALSO
 };
 }


prestar() {
constante nombreclase = este.estado.esVisible? css (estilos.fadeIn): css (estilos.fadeOut);


devolver (
<división>
<div className={className}>
 ¡Hola Mundo!
</div>
<botón onClick={this.toggleVisibility}>
 Palanca
</button>
</div>
 );
 }


alternarVisibilidad = () => {
este.setState (prevState => ({
es visible: !estado anterior.es visible
 }));
 }
}
exportarpor defecto fundido de entrada y salida;

Este ejemplo comienza importando las animaciones fadeIn y fadeOut de la biblioteca de animaciones reactivas. Luego define un objeto de estilos con las animaciones fadeIn y fadeOut, y animationDuration establecido en dos segundos.

El botón alternará la visibilidad del componente. Cuando alguien hace clic en él, la variable de estado isVisible se actualizará y el componente aparecerá o desaparecerá dependiendo de su estado actual.

Método 3: usar la biblioteca react-simple-animate

La biblioteca react-simple-animate proporciona una forma sencilla de agregar animaciones a los componentes de React. Ofrece una API declarativa que facilita la definición de animaciones complejas.

Para usar la biblioteca, primero debe instalarla:

npm instalar reaccionar-simple-animar --ahorrar

Luego, puedes usarlo en tus componentes:

importar Reaccionar, {Componente} de 'reaccionar';
importar { Animar, Animar fotogramas clave} de "reaccionar-simple-animar";
claseaplicaciónextiendeComponente{
 prestar() {
devolver (
<división>
<Animar
 jugar
comenzar={{
 opacidad: 0
 }}
fin={{
 opacidad: 1
 }}
>
<división>
 ¡Hola Mundo!
</div>
</Animate>
<Animar fotogramas clave
 jugar
 duración={2}
 fotogramas clave={[
 { opacidad: 0, transformar: 'traducirX(-100px)' },
 { opacidad: 1, transformar: 'traducirX(0px)' }
 ]}
>
<división>
 ¡Hola Mundo!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exportarpor defecto aplicación;

El Animar el componente se desvanece en un elemento div. Comienza con una opacidad de 0 y termina con una opacidad de 1. El accesorio de reproducción se establece en verdadero, lo que hará que la animación se reproduzca automáticamente cuando se monte el componente.

El Animar fotogramas clave componente anima un elemento div durante dos segundos. La matriz de fotogramas clave especifica los estados inicial y final de la animación. El primer fotograma clave tiene una opacidad de 0 y un valor de translateX de -100px. El segundo fotograma clave tiene una opacidad de 1 y un valor de translateX de 0px.

Aumente la participación del usuario con animaciones

Ahora conoce algunas de las formas en que puede usar animaciones en su aplicación React. Puede usar animaciones para aumentar la participación del usuario con su aplicación.

Por ejemplo, es posible que desee utilizar una animación para recompensar al usuario por completar una tarea. Esto podría ser algo tan simple como una breve animación de "spinner" o una animación más compleja que se reproduce cuando el usuario completa un nivel en un juego.

También puede implementar su aplicación React en la web de forma gratuita con servicios como las páginas de Github o Heroku.