Lottie Android para Kotlin: guía completa con ejemplos

1. ¿Qué es y para qué sirve?

Lottie es una biblioteca de código abierto creada por Airbnb que permite renderizar animaciones de After Effects en tiempo real en dispositivos móviles y web. Para Android existe la biblioteca oficial com.airbnb.android:lottie, con soporte completo para Kotlin. Las animaciones se exportan desde After Effects a formato JSON (mediante el plugin Bodymovin) y se reproducen en la aplicación sin pérdida de calidad y con un tamaño de archivo mínimo.

¿Para qué sirve Lottie? Primero, simplifica drásticamente el trabajo entre diseñadores y desarrolladores: el diseñador crea animaciones complejas en su herramienta habitual y el desarrollador solo tiene que integrar el archivo JSON. Segundo, Lottie ofrece un alto rendimiento: las animaciones se renderizan en la GPU, logrando 60 FPS incluso en dispositivos antiguos. Tercero, la biblioteca es interactiva: puedes controlar la reproducción, cambiar la velocidad, los colores, las dimensiones e incluso animar capas individuales mediante código.

Lottie Android es ideal para: pantallas de carga (splashes), iconos animados, transiciones entre pantallas, reacciones a gestos del usuario, microanimaciones en la interfaz y mucho más. La biblioteca cuenta con un gran respaldo de la comunidad y miles de animaciones gratuitas listas para usar en LottieFiles.

2. Instalación

Para instalar Lottie en un proyecto Android con Kotlin, agrega la dependencia en el archivo build.gradle (a nivel de módulo):

dependencies {
    implementation 'com.airbnb.android:lottie:6.4.0'
}

Si usas Kotlin DSL (build.gradle.kts):

dependencies {
    implementation("com.airbnb.android:lottie:6.4.0")
}

Después de sincronizar Gradle, la biblioteca estará lista para usar. La versión mínima del SDK de Android es 21 (Android 5.0).

Nota: los comandos pip, npm o cargo no se utilizan para esta biblioteca, ya que es una biblioteca nativa de Android.

3. Inicio rápido: ejemplo mínimo funcional

Coloca el archivo JSON de la animación (por ejemplo, animation.json) en la carpeta app/src/main/res/raw. Luego, agrega el LottieAnimationView en tu archivo de diseño:

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_rawRes="@raw/animation"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Código en la Activity (o Fragment) con Kotlin:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val animationView: LottieAnimationView = findViewById(R.id.animationView)
        animationView.playAnimation()
    }
}

Este ejemplo mínimo reproducirá la animación del recurso raw/animation.json en un bucle infinito.

4. Métodos, funciones y clases principales

4