Lottie para Swift: guía completa con ejemplos

Introducción a Lottie para Swift

\n\n

Lottie es una potente biblioteca de código abierto desarrollada por Airbnb que permite mostrar animaciones vectoriales creadas en Adobe After Effects en plataformas móviles y web. Las animaciones se exportan en formato JSON (mediante el plugin Bodymovin) y se reproducen en tiempo real sin pérdida de calidad.

\n\n

Para los desarrolladores de Swift, Lottie abre posibilidades ilimitadas: desde simples indicadores de carga e iconos hasta complejas animaciones a pantalla completa, pantallas de bienvenida y elementos interactivos de interfaz. A diferencia de los GIF o vídeos, las animaciones de Lottie:

\n

\n
• Son vectoriales — se escalan sin pérdida de calidad en cualquier dispositivo.
\n
• Peso reducido — los archivos JSON suelen pesar entre 1 y 50 KB.
\n
• Son interactivas — se puede controlar la reproducción, velocidad, color y progreso.
\n
• Son multiplataforma — el mismo JSON funciona en iOS, Android, Web, React Native y Flutter.
\n

\n\n

Este artículo es una guía completa para usar Lottie en Swift. Aprenderá cómo instalar la biblioteca, dominará todos los métodos clave, analizará un ejemplo real y evitará errores típicos.

\n\n

Instalación de Lottie

\n\n

Lottie para Swift se instala a través de Swift Package Manager (SPM) o CocoaPods. El método recomendado es SPM, ya que está integrado en Xcode.

\n\n

Instalación mediante Swift Package Manager (SPM)

\n

\n
1. En Xcode, abra el proyecto y seleccione File → Add Packages...
\n
2. Pegue la URL del repositorio: https://github.com/airbnb/lottie-ios.git
\n
3. Seleccione la versión (se recomienda la última estable) y haga clic en Add Package.
\n
4. Asegúrese de que el paquete se haya añadido a su destino.
\n

\n\n

Instalación mediante CocoaPods

\n

Si usa CocoaPods, añada al Podfile:

\n

pod 'lottie-ios'

\n

Luego ejecute:

\n

pod install

\n\n

Instalación mediante Carthage (método obsoleto)

\n

github "airbnb/lottie-ios"

\n

Ejecute carthage update --platform iOS y añada el framework al proyecto.

\n\n

Importante: Después de la instalación, importe la biblioteca en el archivo correspondiente:

\n

import Lottie

\n\n

Inicio rápido con ejemplo de código

\n\n

Vamos a crear una aplicación simple que reproduzca una animación de Lottie a pantalla completa.

\n\n

Paso 1: Prepare el archivo JSON

\n

Descargue o cree una animación de Lottie. Para probar, puede usar animaciones gratuitas de LottieFiles. Coloque el archivo JSON (por ejemplo, animation.json) en la carpeta Assets de su proyecto de Xcode.

\n\n

Paso 2: Escriba el código

\n

import UIKit\nimport Lottie\n\nclass ViewController: UIViewController {\n    \n    private var animationView: LottieAnimationView?\n    \n    override func viewDidLoad() {\n        super.viewDidLoad()\n        \n        // 1. Inicialización de la animación desde Assets\n        animationView = LottieAnimationView(name: "animation")\n        \n        // 2. Configuración de tamaño y posición\n        animationView?.frame = view.bounds\n        animationView?.contentMode = .scaleAspectFit\n        \n        // 3. Añadir a la pantalla\n        view.addSubview(animationView!)\n        \n        // 4. Iniciar la animación\n        animationView?.play { (finished) in\n            print("Animación finalizada: \\(finished)")\n        }\n    }\n}

\n\n

Ejecute la aplicación: verá la animación reproducirse una vez. Para hacerla infinita, cambie la llamada play por play(fromProgress: 0, toProgress: 1, loopMode: .loop).

\n\n

Métodos y funciones principales de Lottie

\n\n

A continuación se presentan los 10 métodos clave de Lo