Cómo agregar animaciones a aplicaciones React con React-Lottie

Introducción

Adobe After Effects puede ser una forma intuitiva de generar animaciones web, pero históricamente ha habido problemas al convertir estas animaciones en aplicaciones web. Por lo general, es necesario utilizar un programa de terceros para importar una animación desde After Effects.

Uno de estos programas es Lottie , desarrollado por Airbnb Design. Permite utilizar estas animaciones en tiempo real en un formato ligero y flexible. Lottie toma datos JSON de una extensión de After Effects llamada Bodymovin y los convierte en una animación utilizable para la web.

En este artículo, exploraremos cómo usar Lottie para agregar animaciones a nuestras aplicaciones React. Para lograrlo, usaremos un paquete npm llamado react-lottiepara generar animaciones visibles a partir de archivos JSON exportados por Bodymovin.

Nota: Dado que nos centraremos en la parte de la aplicación, no explicaremos cómo se crean estas animaciones en After Effects, sino que utilizaremos animaciones creadas y de código abierto por diseñadores en LottieFiles . Si tienes animaciones en After Effects que te gustaría utilizar, puedes exportarlas a JSON utilizando el complemento Bodymovin para After Effects.

Para este tutorial, crearemos una aplicación React que consta de dos tipos de Lotties, uno regular y otro con animaciones controladas dependiendo de ciertos valores en el estado.

Si desea ver el código finalizado, eche un vistazo a este ejemplo de CodeSandbox .

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Para descargar archivos JSON de Lottie desde LottieFiles será necesario crear una cuenta gratuita.

Este tutorial fue verificado con Node v14.4.0, npmv6.14.4, reactv16.13.1 y react-lottiev1.2.3.

Paso 1: Configuración del proyecto

Usaremos create-react-apppara crear nuestra aplicación:

npx create-react-app lottie-demo

Esto creará un código repetitivo para nuestra aplicación y configurará nuestro entorno de desarrollo de React. Abre el lottie-demodirectorio y comencemos a codificar:

cd lottie-demo

Ahora, instalemos la dependencia. react-lottiePara ello, ejecute este comando en la terminal:

npm install react-lottie

Ahora, agreguemos nuestras animaciones.

Paso 2: Descarga de muestras de Lotties

Obtendremos nuestras animaciones de muestra de LottieFiles . Navegue hasta ese sitio y cree una cuenta gratuita.

LottieFiles te brinda acceso a una biblioteca seleccionada de animaciones de diseñadores de todo el mundo. También ofrece una plataforma para probar, cargar y compartir tus propias animaciones.

Explore las animaciones, ajuste la configuración si es necesario y cuando esté satisfecho con lo que tiene, haga clic en Descargar JSON para obtener la animación.

Dentro del srcdirectorio de nuestra aplicación, crea un lottiessubdirectorio. Coloca los archivos JSON descargados dentro del lottiesdirectorio.

Ahora estamos listos para crear componentes que muestren estas animaciones.

Paso 3: Creación de Lotties no controlados

Se puede permitir que las animaciones se ejecuten libremente o que se manipulen con datos en el estado. Primero, veamos el primer caso y creemos una animación que importe y renderice un Lottie.

Dentro del srcdirectorio de nuestra aplicación, crea un componentssubdirectorio.

Crea un archivo llamado UncontrolledLottie.jsxdentro del componentsdirectorio y coloca el siguiente código dentro de él:

src/components/UncontrolledLottie.jsx

import React, { Component } from 'react';import Lottie from 'react-lottie';import animationData from '../lotties/4203-take-a-selfie.json';class UncontrolledLottie extends Component {  render() {    const defaultOptions = {      loop: true,      autoplay: true,      animationData: animationData,      rendererSettings: {        preserveAspectRatio: 'xMidYMid slice',      },    };    return (      div        h1Lottie/h1        pBase animation free from external manipulation/p        Lottie          options={defaultOptions}          height={400}          width={400}        /      /div    );  }}export default UncontrolledLottie;

En este caso, 4204-take-a-selfie.jsonse descargó el archivo JSON de Lottie. Reemplace ese archivo con la imagen que haya descargado.

Ahora, exploremos la información proporcionada en la configuración. Notarás que pasamos una optionspropiedad al Lottiecomponente; esta contiene los datos de configuración para la animación que se va a renderizar. Esta consta de:

• animationData– un objeto con los datos de animación exportados, en nuestro caso, el archivo JSON
• autoplay– un valor booleano que determina si comenzará a reproducirse tan pronto como esté listo
• loop– un valor booleano o número que determina si la animación se repetirá o cuántas veces debe repetirse
• rendererSettings– datos de configuración para el renderizador

Éstas son sólo algunas de las opciones que puedes ofrecer.

También proporcionamos las dimensiones ( widthy height) de nuestra animación como accesorios Lottie.

Ahora, agreguemos nuestra Lottie controlada.

Paso 4: Creación de Lotties controlados

Los Lotties se pueden manipular en React para cambiar algunas de sus propiedades usando datos en el estado. En nuestro caso, crearemos botones para controlar las animaciones en nuestro Lottie.

Vamos a crear un archivo en componentsy nombrarlo ControlledLottie.jsx. Coloque el siguiente código en ese archivo:

fuente/componentes/ControlledLottie.jsx

import React, { Component } from 'react';import Lottie from 'react-lottie';import animationData from '../lotties/77-im-thirsty.json';class ControlledLottie extends Component {  state = { isStopped: false, isPaused: false };  render() {    const buttonStyle = {      display: 'inline-block',      margin: '10px auto',      marginRight: '10px',      border: 'none',      color: 'white',      backgroundColor: '#647DFF',      borderRadius: '2px',      fontSize: '15px',    };    const defaultOptions = {      loop: true,      autoplay: true,      animationData: animationData,      rendererSettings: {        preserveAspectRatio: 'xMidYMid slice',      },    };    return (      div className="controlled"        h1Controlled Lottie/h1        pUses state manipulation to start, stop and pause animations/p        Lottie          options={defaultOptions}          height={400}          width={400}          isStopped={this.state.isStopped}          isPaused={this.state.isPaused}        /        button          style={buttonStyle}          onClick={() = this.setState({ isStopped: true })}                  Stop        /button        button          style={buttonStyle}          onClick={() = this.setState({ isStopped: false, isPaused: false })}                  Play        /button        button          style={buttonStyle}          onClick={() = this.setState({ isPaused: !this.state.isPaused })}                  Pause        /button      /div    );  }}export default ControlledLottie;

Analicemos este código. Existen algunas diferencias clave entre este y UncontrolledLottie.jsx. Hemos agregado tres botones en la parte inferior junto con su estilo. Estos botones se utilizan para alternar los valores de los datos en el estado.

El componente Lottie también tiene dos accesorios más:

• isStopped– un valor booleano que indica si la animación está activa o no
• isPaused– un valor booleano que indica si la animación está en pausa o no

Nuestras dos animaciones ya están listas para usarse, así que importémoslas App.jsy mostrémoslas en nuestra aplicación.

Edite el código en App.js, importando nuestros componentes y agregándolos dentro de la función render:

Aplicación.js

import React, { Component } from 'react';import './App.css';import UncontrolledLottie from './components/UncontrolledLottie';import ControlledLottie from './components/ControlledLottie';class App extends Component {  render() {    return (      div className="App"        h1REACT LOTTIES/h1        div className="lotties"          UncontrolledLottie /          ControlledLottie /        /div      /div    );  }}export default App;

Vamos a darle estilo a nuestra aplicación para que sea compatible con dispositivos móviles . Podemos hacerlo usando CSS grid . Agrega el siguiente código a tu App.cssarchivo.

Aplicación.css

.lotties {  display: grid;  grid-template-columns: auto;}@media only screen and (min-width: 800px) {  .lotties {    display: grid;    grid-template-columns: auto auto;  }}

Esto coloca nuestros Lotties en dos columnas que se reducirán a una sola columna en dispositivos con un ancho menor.

Ahora, inicie la aplicación:

npm start

Se abrirá tu navegador y podrás observar las dos animaciones activas.

La Lottie incontrolada se reproducirá automáticamente:

La Lottie controlada tendrá tres botones:

Al hacer clic en Pausa, la animación controlada se congelará en su cuadro actual. Al hacer clic en Detener, la animación volverá a su posición predeterminada y se mantendrá allí.

Conclusión

LottieSe puede utilizar como un método liviano para agregar animaciones a su aplicación web. Se puede utilizar para hacer que las aplicaciones sean más interactivas y brindar información visualmente atractiva, como animaciones que indican el estado de ciertos procesos. Los Lotties tienen un buen rendimiento y no le impondrán una carga excesiva a su aplicación.