¿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:
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.
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.
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.
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í:
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í:
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í:
4.2 Sustituye el código:
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.
