Cómo agregar Lottie Animation en una aplicación de Android

Este artículo trata sobre cómo mejorar la interfaz de usuario de la aplicación móvil agregando archivos de animación de Lottie a nuestra aplicación móvil. Las animaciones de Lottie son archivos de animación vectoriales de uso gratuito. Estos archivos de animación se pueden encontrar en el sitio oficial aquí . Muchas aplicaciones famosas usan esto, como Uber, Netflix, Google, Airbnb, Shopify, etc.
A continuación se muestra un ejemplo de Lottie Animation:
 

Propiedades dinámicas de Lottie Animations

• Estos se pueden usar para darle un tema a la aplicación.
• Estos se pueden agregar en respuesta a cualquier evento, como error, éxito, etc.
• Estos se pueden animar a una sola parte de la animación en respuesta a cualquier usuario.
• Responder a tamaños de vista u otros valores desconocidos en el momento del diseño.

Ventajas de Lottie

• Es compatible con un conjunto más grande de funciones de After Effects.
• Los desarrolladores pueden configurar el progreso para agregar la animación a un gesto, evento, etc.
• Las máscaras tienen suavizado.
• Los desarrolladores tienen la libertad de cambiar dinámicamente la velocidad y el color de una parte específica de una animación.

Enfoque:  
Paso 1: agregue esta dependencia en el módulo Gradle de nivel de aplicación del proyecto y luego sincronice Gradle con el proyecto. Esta biblioteca nos permite usar las animaciones de Lottie: 
 

// Lottie dependency
def lottieVersion = "3.4.0" implementation "com.airbnb.android:lottie:$lottieVersion"

Paso 2: elija cualquier animación de aquí y descargue el archivo JSON de la animación 
 

Descargando el archivo de animación JSON

Paso 3: ahora incluya el código XML en el archivo de diseño donde desea mostrar la animación. Aquí se supone que el nombre del archivo para el archivo JSON es animación. Diferentes métodos a través de los cuales Lottie puede tomar archivos JSON

• Una animación JSON: src/main/res/raw 
   
• Un archivo JSON: src/main/assets 
   
• Un archivo zip: src/main/assets 
   

A continuación se muestra el código XML: 
 

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

Paso 4: (opcional) Agregar controles a la animación: 
 

• Adición de progreso personalizado: aquí se personaliza el valor inicial y final del progreso.
   

// Custom animation speed or duration.
ValueAnimator animator
    = ValueAnimator.ofFloat(0f, 1f);
animator
    .addUpdateListener(animation -> {
        animationView
            .setProgress(
                animation
                    .getAnimatedValue());
    });
animator.start();

• Agregar oyente de animación: se pueden agregar diferentes oyentes con las animaciones de lottie. 
   

// Declaring the animation view
LottieAnimationView animationView
    = findViewById(R.id.animationView);
animationView
    .addAnimatorUpdateListener(
        (animation) -> {
            // Do something.
        });
animationView
    .playAnimation();
 
if (animationView.isAnimating()) {
    // Do something.
}

Producción: 
 

Referencia : https://github.com/airbnb/lottie-android