Lottie — qué es, animación vectorial en aplicaciones móviles

¿Qué es Lottie?

Lottie — una biblioteca multiplataforma para reproducir animación vectorial, desarrollada en Airbnb en 2015. Resuelve el problema de los archivos de vídeo pesados y los sprites rasterizados: un diseñador crea la animación en After Effects, la exporta mediante Bodymovin a JSON y un desarrollador incorpora este archivo en una aplicación móvil. Lottie renderiza la animación mediante programación a través de Canvas, Core Animation o Skia, según la plataforma.

La principal ventaja de Lottie — la animación vectorial se escala sin pérdida de calidad en cualquier pantalla: desde Apple Watch hasta televisores 4K. El tamaño del archivo JSON de animación suele ser de 5–50 KB, decenas de veces menor que el archivo de vídeo equivalente. Según Airbnb Engineering (2025), Lottie admite más del 80% de las funciones de Adobe After Effects, incluyendo máscaras, efectos, curvas y expresiones.

Bodymovin — es un plugin para After Effects (gratuito, GitHub) que serializa una composición en formato JSON que el runtime de Lottie puede entender. Compatible con After Effects CC 2018 y versiones posteriores. Para animaciones complejas con muchos fotogramas clave, se recomienda dotLottie — un formato basado en Lottie JSON pero comprimido y empaquetado en un solo archivo.

Arquitectura de Lottie: cómo funciona el renderizado

Lottie utiliza una arquitectura de renderizado por capas que se adapta a las capacidades de la plataforma. En Android, la animación se dibuja mediante la API de Canvas — el renderizador propio de Lottie (LottieDrawable), que no utiliza animaciones del sistema. En iOS, Lottie se apoya en Core Animation Layers, lo que proporciona un alto rendimiento y 60 FPS. En Flutter, Lottie utiliza Skia Canvas mediante CustomPainter.

El renderizado pasa por tres etapas: análisis JSON — interpretación de la animación en LottieComposition (todas las capas, formas, fotogramas clave); interpolación — cálculo de valores intermedios entre fotogramas clave considerando las curvas de easing; dibujo — renderizado del fotograma actual en Canvas o mediante Core Animation. Lottie admite aceleración por hardware: en Android — aceleración mediante Canvas con Hardware Accelerator, en iOS — CALayer con aceleración GPU integrada de Core Animation.

Uso de Lottie en Android (Kotlin)

En Android, LottieAnimationView extiende AppCompatImageView y gestiona todo el ciclo de carga y renderizado. El archivo JSON se coloca en la carpeta res/raw o assets. LottieAnimationView admite control de reproducción — play, pause, resume, setFrame, setProgress, repeat, speed — y escucha mediante AnimatorUpdateListener y AnimatorListener.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// Configuración programática de LottieAnimationView
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// Carga desde assets y almacenamiento en caché
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — dibujo personalizado sin View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Mejores prácticas en Android: use setCacheStrategy(CacheStrategy.Strong) para animaciones que se repiten con frecuencia — la composición se almacena en caché en memoria y cada nueva instancia no analiza JSON nuevamente. Para listas (RecyclerView), use LottieAnimationView con enableMergePathsForKitKatAndAbove(true) y disableExtraScaleModeForOlderWorkarounds() para optimizar el renderizado. Para animaciones con fondo transparente, configure android:layerType="hardware" para aceleración GPU.

Uso de Lottie en iOS (Swift)

En iOS, AnimationView es la clase principal de Lottie para UIKit y SwiftUI. Se agrega mediante Swift Package Manager o CocoaPods. Los archivos JSON se agregan al bundle del proyecto. AnimationView determina automáticamente la escala (densidad lógica de pantalla) y utiliza Core Animation para renderizar capas a 60 FPS.

import Lottie

// UIKit: AnimationView con control manual
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: animación con progreso (para vincular a eventos)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView como UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// Uso en SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Mejores prácticas en iOS: para animaciones que se inician inmediatamente después de la carga, use animationView.play(fromProgress: 0, toProgress: 1) con loopMode = .playOnce para efectos de acento únicos. Para Lottie en UITableView/UICollectionView, use AnimationView con un archivo de animación en caché mediante LottieAnimation.cached. Renderizar una gran cantidad de capas (50+) puede causar caídas de FPS — en tales casos, active renderingEngine = .mainThread (por defecto) o .coreAnimation para macOS.

Lottie vs vídeo: comparativa de formatos de animación

Lottie se diferencia fundamentalmente de los archivos de vídeo: no almacena píxeles, sino que describe formas vectoriales, sus transformaciones y curvas de cambio en el tiempo. El vídeo (MP4, WebM) es una secuencia de fotogramas rasterizados a una resolución fija. La diferencia se manifiesta en el tamaño del archivo, la calidad de escalado, la interactividad y el rendimiento.

Cuándo elegir Lottie: iconos de carga, animaciones de me gusta/reacciones, pantallas de onboarding, microanimaciones de acento de botones. Para escenas complejas con efectos 3D, iluminación realista o personajes fotorrealistas, el vídeo sigue siendo una opción más práctica. Lottie no está diseñado para reproducir escenas largas (más de 10 segundos) — la duración óptima de una animación es de 2 a 5 segundos.

Optimización del rendimiento de Lottie

El rendimiento de Lottie depende del número de capas, la complejidad de las máscaras y efectos, y del renderizador. Para mantener 60 FPS en dispositivos de gama media, siga estas recomendaciones: limite el número de capas a 30–40 por escena, evite precomposiciones anidadas superpuestas, use dotLottie para animaciones complejas.

// Optimización de Lottie para RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Almacenamiento en caché de la composición en memoria
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool de LottieAnimationView para reutilización
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// Desactivación de funciones innecesarias
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Limitación del número de fotogramas

Optimizaciones adicionales: active enableMergePathsForKitKatAndAbove(true) para dispositivos con Android 4.4+ — esto fusiona trazados superpuestos en un solo trazado, reduciendo el número de llamadas de dibujo. Use dotLottie en lugar de JSON — el formato binario comprime la animación entre un 50 y un 80% mediante serialización protobuf, reduciendo el tiempo de análisis. Para animaciones en RecyclerView, establezca repeatCount = 0 (reproducción única) y detenga la animación al hacer scroll mediante recyclerView.addOnScrollListener. Según Airbnb Engineering Blog (2025), estas medidas reducen la carga de CPU hasta en un 40%.