¿Qué es una Lottie?

Una Lottie es una animación codificada en JSON de alta calidad compatible con Android, iOS, navegadores web, React y más. Aquí puedes encontrar más información sobre qué es una Lottie.

La mejor manera de aprender cómo usar una Lottie es integrar una. Sigue este tutorial para aprender a incorporar tu Lottie favorita a una aplicación de React.

1.Elige tu Lottie

Elige una animación, ya sea una propia o una de entre la amplia selección de animaciones gratuitas de LottieFiles. Asegúrate de que tu animación esté en formato Lottie (.json).

Para este tutorial utilizaremos esta animación:

Kiss of the Heart

2.Prepara el entorno de desarrollo de React

¿Eres fan de Windows, adicto a tu Mac o utilizas Ubuntu en una laptop? Bueno, en realidad no importa, ya que este tutorial empleará CodeSandbox como entorno de desarrollo en línea para que cualquiera pueda usarlo desde cualquier computadora que tenga un navegador. Este sandbox en particular renderizará nuestra aplicación para que podamos ver la salida HTML, es decir, nuestra Lottie en acción.

2.1 Inicia un nuevo proyecto de React en CodeSandbox

Esto crea un modelo de proyecto React con el iniciador oficial create-react-app.

A boilerplate React project in CodeSandbox

Ahora tienes una nueva y reluciente aplicación React sobre la que empezar a trabajar.

2.2 Añade el componente de React para reproducir Lottie

Empezaremos dando a tu aplicación de React la capacidad de renderizar tu Lottie añadiendo un componente de React para renderizar las animaciones Lottie. Localiza la sección "Dependencias" en el panel izquierdo, utiliza "Añadir dependencia" y busca react-lottie, selecciónalo de entre los resultados.

List of React dependencies

2.3 Añade la dependencia prop-types

También ocuparemos una segunda dependencia. Busca la dependencia prop-types y haz clic en Añadir dependencia.

List of React dependencies, with prop-types included

3.Aplica tu Lottie

Ya estás listo para añadir tu Lottie y editar tu aplicación de React para incluir una llamada a tu Lottie.

3.1 Crea un directorio para guardar los activos de Lottie

Coloca el cursor sobre "src" en codesandbox, elige "Nuevo directorio" y ponle lotties como nombre. Dentro de esta carpeta, crea un nuevo archivo llamado kiss-of-the-heart.json.

Tu sandbox debería verse así:

View of folder structure

El panel central de CodeSandbox muestra este archivo (vacío).

3.2 Abre tu copia local del Lottie descargado y pega el Lottie JSON que codifica tu Lottie en el panel central que muestra este archivo.

Los atajos de NB son una maravilla, y 3 te ayudarán aquí:

  • CTRL + A (selecciona todo)
  • CTRL + C (copia todo)
  • CTRL + V (pega todo)

Tu archivo debe verse así:

View of the Lottie animation JSON code

4.Usa tu Lottie

El paso final. Tu aplicación de React ahora necesita usar tu archivo Lottie mediante el reproductor de Lottie. Para que esto suceda, editamos el archivo App.js.

4.1 Importa el componente reproductor react-lottie y el archivo Lottie JSON:

Agrega lo siguiente al inicio de tu archivo App.js.

import React from 'react';
import './styles.css';
import Lottie from 'react-lottie';
import animationData from './lotties/kiss-of-the-heart';

Tu lista de importación ahora se verá así:

Import list in React

4.2 Sustituye el código:

Code block in React

con:

export default function App() {
  const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };
  
  return (
    <div>
      <Lottie 
	    options={defaultOptions}
        height={400}
        width={400}
      />
    </div>
  );
}

Inténtalo tú

Así de fácil es usar una animación Lottie, y tenemos una enorme colección de animaciones en LottieFiles con creaciones de algunos de los mejores animadores, las cuales puedes usar de forma gratuita. Descubre animaciones de primera y mejora el aspecto de tus páginas sin perjudicar el tiempo de carga.

¿Quieres más?

¿Te gustaría poder dar al usuario el control sobre el comportamiento de la Lottie? Si es así, echa un vistazo al artículo Controla tu Lottie en una aplicación de React.