¿Cómo controlar las animaciones de Lottie mediante programación en Android?

Lottie es una biblioteca móvil para Android e iOS que analiza las animaciones de Adobe After Effects exportadas como JSON con Bodymovin y las renderiza de forma nativa en dispositivos móviles. Usando Lottie, uno puede poner animaciones dentro de una aplicación móvil (Android/iOS) e incluso controlarlas. A través de este artículo, nos gustaría compartir con ustedes la implementación de un método para controlar una animación JSON en Android usando Lottie. qué

Nota: para usar Lottie Animation en Android, consulte Cómo agregar Lottie Animation en una aplicación de Android

Pasos para controlar las animaciones de Lottie

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: agregue la biblioteca al archivo build.gradle

Para implementar una animación con Lottie, primero implemente una implementación de dependencia ‘com.airbnb.android:lottie:$lottieVersion’ en el archivo build.gradle de la aplicación. La última versión en octubre de 2020 es 3.4.2 , reemplace $lottieVersion con este valor. Ahora sincronice el proyecto haciendo clic en la opción de sincronización que aparece después de cada cambio realizado en el archivo build.gradle . Recuerde, build.gradle es siempre un archivo Groovy o Kotlin.

implementación ‘com.airbnb.android:lottie:3.4.2’

Paso 3: agregue un archivo de animación de lottie al proyecto

aquí

Ahora vaya a aplicación > res > haga clic con el botón derecho en > Nuevo > Carpeta > Carpeta de recursos sin procesar y copie el archivo JSON en esta carpeta sin procesar.

Paso 4: trabajar con el archivo activity_main.xml

En el archivo activity_main.xml , declare un objeto Lottie especificando los parámetros. También declare dos botones , uno para iniciar la animación y otro para pausarla. Los parámetros primarios son:

• lottie_rawRes : toma la animación JSON que se mostrará.
• lottie_loop : valor booleano, que decide si la animación está en bucle o no dependiendo del valor booleano proporcionado.
• lottie_autoPlay : valor booleano, que decide si la animación se reproduce tan pronto como se inicializa.

Es importante tener en cuenta que la animación JSON solo debe guardarse en una carpeta denominada raw en la carpeta res, ya que las funciones se realizan explícitamente para llamar a esta ruta de archivo. Y el nombre del archivo JSON no debe contener ningún carácter especial que no sea ‘ _ ‘.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:lottie_autoPlay="false"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/animation1" />
  
    <Button
        android:id="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/animationView"
        android:layout_centerHorizontal="true"
        android:text="Start" />
  
    <Button
        android:id="@+id/btnStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btnStart"
        android:layout_centerHorizontal="true"
        android:text="Stop" />
  
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity.kt

A continuación se muestra el código del  archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declaring the buttons
        val startBtn = findViewById<Button>(R.id.btnStart)
        val stopBtn = findViewById<Button>(R.id.btnStop)
  
        // On the click of startBtn
        startBtn.setOnClickListener {
             // is an Animation Listener
            animationView.playAnimation() 
        }
  
        // On the click of stopBtn
        stopBtn.setOnClickListener {
             // is an Animation Listener
            animationView.pauseAnimation() 
        }
    }
}

Salida: ejecutar en el emulador