Animaciones y Sonidos con React
¿Te gustaría darle más vida a tu página web mediante animaciones y sonidos sencillos?
Si tu respuestas es que si, te doy la bienvenida a mi post, donde aprenderás como con animaciones y sonidos sencillos pues hacer que tu pagina web sea mas atractiva. Para ello debemos tener previamente instalado Node.js y Yarn en el equipo.
TECNOLOGÍAS
REACT
Es la base de este proyecto. Se trata de un framework/tecnología que trabaja en una sola pagina (Single Page App) y en sí, es una biblioteca Javascript, diseñada para facilitar la creación de interfaces de usuario.
Comando para crear un proyecto de React:
npx create-react-app nombreproyectoREACT-SPRING
Se trata de una biblioteca de animaciones que estan basadas en físicas. La física base que usa React Spring son la masa, la tensión y la fricción. Y por otra parte, podremos crear una animacion con varias propiedades, o sino, animar las propiedades por separado, todo esto se debe crear en una función y no directamente en la clase. Podemos encontrar la documentación oficial en https://react-spring.io/
Comando para añadir React-Spring. (Importante ubicarte dentro de la carpeta)
yarn add react-springREACT-HOWLER
Es una pequeña biblioteca de audio con el que podemos manejar y controlar el audio de nuestra pagina web, además de que nos proporciona el tener unos efectos de entrada y salida de audio de forma progresiva. En este caso lo he usado directamente en la clase.
Comando para añadir React-Howler. (Importante ubicarte dentro de la carpeta)
npm install --save react-howlerPROYECTO
En este proyecto lo que haremos será animar una lista, que en sí sería el menu del ejemplo. Y además de animar las cartas que tendrá cada una de las opciones del menú.
Si quieres saber si se instalo tanto React Spring como React Howler, lo podemos verificar en el package.json
Y para empezar, deberemos importar las tecnologías que vamos a usar, lo cuales son useSpring, config, animated del React- Spring y el ReactHowler de React-Howler:
REACT SPRING
Primero empezaremos con REACT-SPRING, es decir, con las animaciones. Nos creamos una función fuera de la clase:
Después tendremos que inicializar un state para que la animación se haga y regrese a su forma original (En este ejemplo tambien inicializo props ya que estoy creando la lista de forma dinámica).
Una vez inicializado el state, crearemos la animación de cada elemento de la lista (en este caso esta separado en dos animaciones para ver las dos formas de animar un elemento). Para empezar, crearemos una constante que usara la funcion useSpring()
1º FORMA
La configuración sera, primeramente decir el inicio de la animacion (FROM), en este caso, mediante el state el inicio será inicialmente de 130px y después de 150px. Después deberemos indicar el final de la animación (TO), el cual es lo contrario al inicio. Por útimo, pondremos el config personificado, es decir, pondremos los parametros de MASS, TENSION y FRICTION.
Para que funcione, en la etiqueta donde queremos se se hagan las animaciones, deberemos colocar antes del nombre de la etiqueta la palabra <animated.TAG/>. Y colocaremos la animacion en el style con una sola llave ‘ {animacion} ‘
2º FORMA
Configuraremos directamente los elementos CSS mediante la funcion useSpring(), en este caso, modificaremos solo el opacity y usaremos el config que nos proporciona React-Spring, que son configuraciones predeterminadas.
Para que funcione se colocará el nombre de <animated.TAG/>, con la diferencia de que se colocara la animación como si fuera una estilo normal, es decir, entre dos llaves ‘ {{opacity, otros estilos}} ‘
REACT HOWLER
Y para terminar seguiremos con React Howler. Esta libreria nos permitira colocar un audio dentro de nuestro proyecto de React y poder reproducir dicho sonido cuando el usuario haga alguna acción en la página.
Antes de todo tendremos que importar los sonidos que vayamos a usar en React
Después crearemos un Componente ReactHowler dentro de la clase que tendra como propiedades un src (es donde colocaremos la ubicación del video) y un playing(que se encargará de decir si reproducir o no).
(opcion es un boolean que esta en el state)
Autor/a: Braian Oscar Loza Quiroga
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código / recursos utilizados / Otros datos de interés: https://github.com/MsrBrownie06/Posts