Lottie: qué es, animaciones y cómo funciona en plataformas móviles

Qué es Lottie y cómo funciona

Lottie es una librería de código abierto creada por Airbnb en 2015 para renderizar animaciones vectoriales en tiempo real. El desarrollador crea una animación en Adobe After Effects, la exporta mediante el plugin Bodymovin a JSON, y Lottie reproduce ese JSON en el dispositivo de destino interpretando capas, formas, transparencia y curvas de animación.

A diferencia de los archivos de video o GIF, Lottie es independiente de la resolución — la animación se renderiza vectorialmente y se ve igual en dispositivos con cualquier DPI. Una animación JSON es en promedio de 5 a 10 veces más pequeña que un GIF o video equivalente, lo cual es crítico para aplicaciones móviles con ancho de banda limitado.

Según Airbnb Engineering, la adopción de Lottie redujo el tamaño de las animaciones en la aplicación en un 80% en comparación con las secuencias de video Precomposed, manteniendo 60 FPS en todos los dispositivos compatibles. Hoy, Lottie es compatible con iOS, Android, Flutter, React Native, Web (HTML Canvas y SVG) y plataformas de escritorio.

El rendimiento de Lottie proviene del renderizado nativo: en iOS usa Core Animation con CALayer, en Android — su propio renderizador Canvas en C++ mediante JNI. Esto permite reproducir animaciones complejas con docenas de capas sin pérdida de fotogramas incluso en dispositivos de gama media. A diferencia de las soluciones basadas en WebView (GIF, APNG, video), Lottie no crea un proceso separado para el renderizado ni consume memoria adicional para la decodificación de fotogramas.

Use Lottie para indicadores de carga, iconos con microinteracciones, pantallas de onboarding y animaciones promocionales festivas donde importan la fluidez y el tamaño reducido.

El ecosistema de Lottie incluye reproductores oficiales para ocho plataformas, el editor LottieFiles para vista previa en el navegador y un mercado con miles de animaciones listas. El desarrollador puede descargar un JSON, integrarlo en un proyecto y ajustar colores y velocidad según el sistema de diseño sin abrir After Effects. LottieFiles también proporciona un SDK para integración acelerada con la capacidad de cargar animaciones mediante un enlace AIR, lo que permite actualizar animaciones en dispositivos sin publicar una nueva versión de la aplicación en App Store o Google Play.

Formato JSON de Lottie y Bodymovin

El esquema JSON de Lottie es un estándar abierto para describir animaciones vectoriales, que consta de tres niveles: composición, capas y formas. La composición contiene metadatos: tamaño del lienzo, frecuencia de fotogramas y duración.

Estructura del JSON

El objeto JSON raíz contiene el campo layers — un array de capas de animación. Cada capa puede ser una Shape Layer (capa de forma), Image Layer (capa de imagen), Text Layer (capa de texto) o PreComp Layer (precomposición). Para cada capa se definen propiedades de transformación: posición, escala, rotación y opacidad vinculadas a fotogramas clave.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Los fotogramas clave (Keyframes) se definen como arrays con marcas de tiempo, valores y curvas Bezier para interpolación. Bodymovin convierte automáticamente las curvas de After Effects a un formato compatible con Lottie, conservando el ritmo y las funciones de easing con precisión de fotograma.

Bodymovin — plugin de exportación

Bodymovin es una extensión de Adobe After Effects que exporta una composición a un archivo JSON de Lottie. El plugin admite la mayoría de las funciones de After Effects: formas, máscaras, efectos, capas de texto y tracking. Las limitaciones afectan a las capas 3D y algunos plugins — no se exportan y requieren simplificar la animación a 2D.

Integración de Lottie en iOS

En iOS, Lottie se integra mediante Swift Package Manager, CocoaPods o Carthage. Las clases principales son LottieView para SwiftUI y LottieAnimationView para UIKit. El paquete lottie-ios incluye soporte para animaciones desde el bundle, la red y objetos Data.

LottieView en SwiftUI

LottieView es un componente View para SwiftUI que acepta un nombre de archivo JSON del bundle o una URL para carga desde la red. La animación se reproduce automáticamente a la velocidad y número de repeticiones especificados.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

Para UIKit, se usa LottieAnimationView, configurable mediante Interface Builder o programáticamente. La vista admite todos los estados de animación: play, pause, stop, así como una barra de progreso para carga de datos. LottieAnimationView se puede integrar en UITableViewCell o UICollectionViewCell para iconos animados en listas — al hacer scroll, la animación se pausa y al aparecer la celda en pantalla se reanuda, ahorrando recursos de CPU y GPU.

El desarrollo moderno de iOS usa activamente Lottie con SwiftUI para crear pantallas de onboarding animadas y elementos interactivos: al hacer scroll, el progreso de la animación se sincroniza con la posición del scroll mediante ScrollViewReader. Esto crea un efecto de paralaje donde la animación sigue continuamente el movimiento del dedo del usuario, aumentando la participación sin usar archivos de video pesados.

Control de reproducción

El reproductor Lottie en iOS proporciona una API para la reproducción desde un fotograma específico a otro, cambiar colores de relleno/trazo mediante KeyPaths y escuchar eventos a través de LottieAnimationDelegate. Se puede pausar la animación durante el scroll y reanudarla al detenerse para optimizar el rendimiento.

Integración de Lottie en Android

En Android, Lottie se añade mediante la dependencia Gradle com.airbnb.android:lottie. El componente principal es LottieAnimationView, que se puede colocar en el diseño XML como una View normal y configurar mediante atributos o programáticamente.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

En el diseño XML, LottieAnimationView se configura mediante atributos: lottie_rawRes (referencia al JSON en res/raw), lottie_autoPlay, lottie_loop. La carga desde la red se admite mediante lottie_url o programáticamente con setAnimationFromUrl. La versión de Android de Lottie usa su propio renderizador Canvas, independiente de la aceleración por hardware.

Carga desde RawRes y red

Para animaciones estáticas, el JSON se coloca en res/raw y se referencia mediante RawRes. Para animaciones dinámicas, Lottie carga el JSON desde una URL o un objeto Data con un callback de progreso que muestra el porcentaje de descarga. La caché de Lottie guarda automáticamente las animaciones cargadas en memoria para evitar recargas al renderizar de nuevo.

Lottie para Android admite animación en RecyclerView mediante LottieAnimationView integrada directamente en los elementos de la lista. Para optimizar el rendimiento, se recomienda usar setAnimation con carga diferida y desactivar la animación para elementos fuera de pantalla mediante el callback RecyclerView.OnChildAttachStateChangeListener. Esto evita caídas de FPS al hacer scroll en listas largas con iconos animados.

Personalización y control de animaciones Lottie

Lottie proporciona una API potente para personalizar animaciones ya creadas sin modificar el archivo original de After Effects. Esto permite adaptar una misma animación a diferentes temas, colores y tamaños de aplicación.

Cambio de color mediante KeyPath

Los colores de relleno y trazo se pueden cambiar en tiempo de ejecución mediante KeyPath — una ruta de cadena a un elemento de la animación. Por ejemplo, para cambiar el color de un icono de carrito de rojo a azul, basta con encontrar su KeyPath y aplicar el nuevo valor. Esto elimina la necesidad de almacenar múltiples versiones de la misma animación para diferentes esquemas de color.

Control de velocidad y progreso

Cada animación Lottie se puede controlar por velocidad (animationSpeed), progreso (setProgress) y rango de fotogramas (play(fromFrame:toFrame:)). El modo de progreso permite sincronizar la animación con un gesto de scroll: cuanto más se desplaza la pantalla, más avanzada está la animación — una técnica popular para onboarding y efectos de paralaje.