¿Cómo usar Lottie animations & React JS? 🖌️

Franklin Martinez - Jul 15 '22 - - Dev Community

Seguramente has visto algunos elementos parecidos a las GIFs en las paginas web que llaman mucho su atención por su movimiento y su diseño, y te preguntaras: ¿Qué son esos elementos? y ¿Como puedo utilizarlos en mi pagina web?

Bueno, esto es precisamente lo que aprenderás, pero usando React JS.

Cualquier tipo de Feedback es bienvenido, gracias y espero disfrutes el articulo.🤗

 

Tabla de contenido.

📌 Tecnologías a utilizar.

📌 ¿Qué son los Lottie animations?

📌 Diferencia entre GIF y Lottie.

📌 Sitios web donde puedes descargar archivos Lottie.

📌 Creando el proyecto.

📌 Instalando dependencia para usar Lottie con React JS.

📌 Primeros pasos.

📌 Usando Lottie.

📌 Otras configuraciones para el Lottie.

📍 Speed.

📍 Background.

📍 Direction.

📍 Style.

📍 onEvent.

📌 Obteniendo la referencia.

📍 Ejecutando métodos del Player.

📌 Agregando controles.

📌 Conclusión.

📍 Demostración en vivo.

📍 Código fuente.

 

🖍️ Tecnologías a utilizar.

  • ▶️ React JS (version 18)
  • ▶️ Vite JS
  • ▶️ TypeScript
  • ▶️ LottieFiles
  • ▶️ CSS vanilla

 

🖍️ ¿Qué son los Lottie animations?

Lottie es una biblioteca creada por Airbnb para facilitar la creación de animaciones para diferentes plataformas.

Un archivo Lottie está compuesto por un archivo JSON. Esto significa que, si tienes conocimientos en este tipo de archivos, puedes modificar tanto su aspecto como sus variables. (aunque también existen aplicaciones que te permite modificarlos de una manera más fácil).

Los Lottie funcionan en cualquier dispositivo y se pueden escalar sin pérdida de calidad, al igual que un archivo SVG.

 

🖍️ Diferencia entre GIF y Lottie.

La gran diferencia entre los GIF animados y los archivos Lottie, es que los GIFs están formados por imágenes y los Lottie se generan a través de código en un archivo de tipo JSON, lo que permite personalizarlos completamente.

Los Lottie a nivel de tiempos de carga son mucho más rápidos que la multitud de los archivos GIFs y tienen un peso menor que los GIFs.

 

🖍️ Sitios web donde puedes descargar archivos Lottie.

 

🖍️ Creando el proyecto.

Al proyecto le colocaremos el nombre de: lottie-app (opcional, tu le puedes poner el nombre que gustes).

npm init vite@latest
Enter fullscreen mode Exit fullscreen mode

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd lottie-app
Enter fullscreen mode Exit fullscreen mode

Luego instalamos las dependencias.

npm install
Enter fullscreen mode Exit fullscreen mode

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .
Enter fullscreen mode Exit fullscreen mode

 

🖍️ Instalando dependencia para usar Lottie con React JS.

Para usar archivos Lottie en react, existen algunas librerías para dicha tarea, en este caso usaremos @lottiefiles/react-lottie-player

Entonces, en la terminal (debemos estar en el proyecto lottie-app), ejecutamos el siguiente comando para instalar la dependencia para usar los archivos Lottie.

npm install @lottiefiles/react-lottie-player
Enter fullscreen mode Exit fullscreen mode

 

🖍️ Primeros pasos.

Dentro de la carpeta src/App.tsx borramos todo el contenido del archivo y colocamos un componente funcional que muestre un titulo.

export const App = () => {
  return (
    <div className='container'>
      <h1>Using Lottie with React JS ⚛️</h1>
    </div>
  )
}
export default App
Enter fullscreen mode Exit fullscreen mode

Debería de verse algo así 👀:

Title

 

🖍️ Usando Lottie.

Ahora necesitamos un componente especial para mostrar nuestro Lottie. El componente se llama Player y lo obtenemos del siguiente paquete.

import { Player } from '@lottiefiles/react-lottie-player';
Enter fullscreen mode Exit fullscreen mode

Hora de usarlo!

import { Player } from '@lottiefiles/react-lottie-player';

const App = () => {
  return (
    <div className='container'>
      <h1>Using Lottie with React JS ⚛️</h1>

      <Player/>

    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

El componente Player necesita un propiedad que es obligatoria, la cual es el src. El cual recibe un string.

Y de donde obtenemos ese src?

Dicha propiedad la podemos localizar en alguna pagina donde puedas descargar archivos Lottie. (en este caso, usaremos la pagina de LottieFiles).

1- Primero, iniciamos sesión o creamos una cuenta en LottieFiles.

2- Buscamos algún Lottie y lo seleccionamos.

3- Lo mas probable es que debajo del Lottie te aparezcan unas opciones y una de ellas sera el Lottie Animation URL y esa URL sera la que colocaremos en la propiedad src del componente Player.

🚨 Nota: Debes ponerle un ancho y alto a este componente Player. Puedes usar la propiedad style que el componente ofrece; yo en este caso lo hago atreves de un className y estilos cSS

import { Player } from '@lottiefiles/react-lottie-player';

const App = () => {
  return (
    <div className='container'>
      <h1>Using Lottie with React JS ⚛️</h1>

      <Player
        src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
        className="player"
      />

    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

 

Debería de verse así 👀:

Page

Notaras que el lottie no realiza ningún movimiento como animación, eso es debido a que faltan algunas propiedades que debemos configurar.

  • autoplay: permite que el lottie inicie de manera automática una vez este listo. (recibe valores booleanos).
  • loop: permite que la animación se vuelva a repetir de manera automática (recibe valores booleanos). 
<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
/>
Enter fullscreen mode Exit fullscreen mode

Ahora debería de verse así 👀:

Page

Generalmente esto es lo único que necesitarías para usar lottie en tu aplicación, pero veamos que otras propiedades nos ofrece este componente.

 

🖍️ Otras configuraciones para el Lottie.

Ademas de las propiedades que vimos con anterioridad, el componente Player tiene otras propiedades interesantes como:

 

🟣 Speed.

Propiedad que recibe un valor numérico, el cual maneja la velocidad de la animación y por defecto tiene el valor de 1

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  speed={10}
/>
Enter fullscreen mode Exit fullscreen mode

 

🟣 Background.

Propiedad que recibe un valor string y el cual maneja el color del fondo del Lottie.

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  background='red'
/>
Enter fullscreen mode Exit fullscreen mode

 

🟣 Direction.

Propiedad que recibe un valor numérico ( 1 o -1) y el cual maneja el en que dirección se debe realizar la animación (comenzando desde el inicio al final o comenzando desde el final al inicio). Por defecto su valor es 1.

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  direction={-1}
/>
Enter fullscreen mode Exit fullscreen mode

 

🟣 Style.

Propiedad que recibe un objeto (igual que un estilo en linea en JSX) y el cual maneja el estilo del contenedor del Lottie

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  style={{ height: '300px', width: '300px' }}
/>
Enter fullscreen mode Exit fullscreen mode

 

🟣 onEvent.

Esta propiedad recibe una función que permite recibe como parámetro un PlayerEvent.
Básicamente esta función esta escuchando diversos eventos:

  • load: Cuando los datos de la animación se cargan.
  • error: Cuando una fuente de animación no puede ser analizada, no se carga o tiene errores de formato.
  • ready: Cuando los datos de la animación están cargados y el reproductor está listo.
  • play: Cuando la animación comienza a reproducirse.
  • pause: Cuando la animación está en pausa.
  • stop: Cuando la animación se detiene.
  • freeze: Cuando la animación se detiene porque el reproductor es invisible.
  • loop: Cuando se completa un bucle de animación.
  • complete: Cuando la animación se ha completado
  • frame: Cuando se introduce un nuevo fotograma. 
const handleEventPlayer (e:PlayerEvent) => {
  if (event === 'load') alert('Lottie Load!')
}

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  onEvent={handleEventPlayer}
/>
Enter fullscreen mode Exit fullscreen mode

 

🖍️ Obteniendo la referencia.

Obtener la referencia al componente Player es similar a como lo haríamos con un componente JSX. Solo necesitamos usar la propiedad ref y en conjunto con el hook useRef, ya tendríamos lo necesario.

const playerRef = useRef<Player>(null);

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  ref={playerRef}
/>
Enter fullscreen mode Exit fullscreen mode

¿Y para que necesitaríamos obtener la referencia al componente Player?

Bueno, obtener la referencia sera necesario para ejecutar diversos métodos que nos ofrece el componente. Los cuales veremos a continuación.

 

🟣 Ejecutando métodos del Player.

Dentro de la propiedad current de la referencia playerRef, tendremos acceso a unos cuantos métodos como:

  • play: Comienza a reproducir la animación.

  • pause: Pausa la animación.

  • stop: Detiene la animación.

Ninguno de los métodos antes mencionados requieren algún parámetro y no retornan nada.

playerRef.current.play();

playerRef.current.pause();

playerRef.current.stop();
Enter fullscreen mode Exit fullscreen mode

También tenemos unas funciones setters para estableces ciertos valores al Player

  • setPlayerSpeed: Establece la velocidad de la animación, recibe solo valores numéricos.

  • setLoop: Establece si la animación debe ejecutarse mas de una vez de manera automática, recibe solo valores booleanos.

  • setSeeker: Establece un fotograma determinado. recibe solo valores numéricos o cadenas de porcentaje.

playerRef.current.setPlayerSpeed(5);

playerRef.current.setLoop(true);

playerRef.current.setSeeker('50%');
Enter fullscreen mode Exit fullscreen mode

 

🖍️ Agregando controles.

Aparte del componente Player, también existe otro componente llamado Controls , y para usarlo debe estar anidado dentro del componente Player de la siguiente manera:

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
>
  <Controls/>
</Player>
Enter fullscreen mode Exit fullscreen mode

Dicho componente recibe diversos parámetros, pero solo mencionaremos algunos como:

  • visible. Propiedad que permite hacer visible o no, la caja de controles. Solo acepta valores booleanos.

  • darkTheme. Propiedad que permite cambiar el aspecto de la caja de controles a un tema oscuro. Solo acepta valores booleanos.

  • buttons. Propiedad que permite desplegar los botones que puede tener la caja de controles. Solo acepta un arreglo de strings con algunos de los siguientes valores:

    • play
    • repeat
    • stop
    • frame
    • snapshot
    • background 
<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
>
  <Controls
    visible={true}
    darkTheme={true}
    buttons={['play', 'repeat', 'frame', 'stop']}
  />
</Player>
Enter fullscreen mode Exit fullscreen mode

Hice este ejemplo también para que puedas observar dichos controles. Échale un vistazo! 👀 Ve a la sección de 'Demostración en vivo'

Lottie app config

 

🖍️ Conclusión.

Los archivos Lottie son una mejor opción para adornar tu web y darle vida con estas animaciones. Cada vez es un elemento más utilizado en el diseño web. 👐

🚨 Pero no obstante, debes tener control sobre la cantidad de animaciones que colocas, no quieres sobrecargar tu web y hacerla más lenta.

🚨 Y también, debes tener cuidado de donde descargas estos archivos, por que recuerda que son basados en código! Asi que debes buscar fuentes viables.

🖍️ Demostración en vivo.

https://lottie-app-demo.netlify.app/

🖍️ Código fuente.

GitHub logo Franklin361 / lottie-app

Application to show how Lottie files work using React JS ⚛️

How to use Lottie animations in React? 🖌️

This project will help you understand how to use Lottie animations together with the React JS library.

 

Image or Gif

 

Technologies 🧪

 

Installation 🧰

  1. Clone the repository (you need to have Git installed).
    git clone https://github.com/Franklin361/lottie-app
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies of the project.
    npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the project.
    npm run dev
Enter fullscreen mode Exit fullscreen mode

 

Links ⛓️

Demo of the application 🔥

  • 🔗

Here's the link to the tutorial in case you'd like to take a look at it! eyes 👀

  • 🇲🇽 🔗

  • 🇺🇲 🔗




View on GitHub


Image
tutorial menunjuk situs slots online yang beri keuntungan
Image
Installing a upvc Door Panel Cat Flap
Image
Happy Diwali to All of you
Image
Testing 2
Image
3 Reasons Commonly Cited For Why Your Keys Repair Isn't Working (And How To Fix It)
Image
How Do You Know If You're Set For Key Repair
Image
25 Surprising Facts About Asbestos Lawsuit Attorneys
Image
10 Healthy Asbestos Claims Payout Habits
Image
꽁머니로 잃어버린 꿈을 되찾다
Image
6 Best Practices for Performing a Fraud Risk Assessment

cybersecurity, fraud, compliance
Image
A useState performance tip you may not have known

react, webdev, javascript, webperf
Image
Kelebihan main judi online untuk remaja
Image
slots online serta 2 cara untuk menang gampang.
Image
14 Misconceptions Common To Accident Lawyer Dallas
Image
The Best Tips You'll Receive About Compensation For Asbestos
Image
11 Ways To Completely Redesign Your How Much Are Spare Car Keys
Image
Sending Transactional Emails with Transmitly (C#)

opensource, csharp
Image
The Companies That Are The Least Well-Known To Follow In The Crypto Casinos For Us Players Industry
Image
Metode Hindarkan Perangkap Agen Judi Online Penipu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .