Hola. Soy zm soft, que se registró como desarrollador el año pasado (finales de 2023) y empezó a lanzar aplicaciones. También planeamos lanzar una aplicación para desarrolladores, así que compruébala si te interesa.
¿Usáis animaciones en vuestras aplicaciones? Con tan solo un poco de animación, una app puede volverse más intuitiva y visualmente atractiva, ¿verdad? Por eso, hoy quiero escribir sobre cómo mostrar animaciones en aplicaciones Android.
LottieAnimation
La biblioteca que uso es LottieAnimation, una biblioteca para mostrar animaciones. La uso porque permite mostrar animaciones ligeras de forma relativamente sencilla.
Tipos de animaciones disponibles
En primer lugar, uno de los puntos fuertes de esta biblioteca es la abundancia de animaciones gratuitas disponibles. Por ejemplo, existen animaciones de este tipo.
Estas animaciones están publicadas en el sitio oficial de LottieFiles. También hay muchas animaciones de pago, pero con solo filtrar por gratuitas, lo que aparece es más que suficiente para usar. Básicamente, como no tengo ni las habilidades ni la energía para crear animaciones desde cero, cuando quiero añadir algún movimiento, primero pienso en buscar algo utilizable en este sitio. Por ejemplo, usando animaciones como estas, puedes guiar al usuario hacia los puntos de clic habituales en la primera visualización. De hecho, utilicé la animación de la derecha para guiar a los usuarios sobre cómo operar.
El punto clave: la sencillez
La implementación también puede resolverse de forma bastante simple. Por ejemplo, si solo quieres mostrar una animación en un layout determinado, basta con definirlo de la siguiente forma para que funcione. ¿No es genial que funcione sin necesidad de implementar ninguna lógica?
Método de implementación sencillo de Lottie
La implementación de Lottie es extremadamente simple. Basta con incrustar la animación en un layout específico para que funcione sin lógica adicional.
Ejemplo de implementación:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Uso básico de Lottie
Los pasos principales para usar Lottie son los siguientes:
- Inclusión de la biblioteca (modificación de build.gradle)
- Obtención y colocación del archivo de animación
- Configuración del archivo de layout
- Personalización de la animación
Ejemplos de implementación concretos y código
A continuación se proporcionan ejemplos de implementación concretos al usar Lottie. Incluyen la inclusión de la biblioteca, cómo colocar el archivo de animación, cómo configurar el archivo de layout y cómo personalizar la animación.
Registro en build.gradle / Inclusión de la biblioteca:
Primero, incluye la biblioteca para poder usar Lottie.
Si no hay problemas de compatibilidad, utiliza el entorno más reciente.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Colocación del archivo de animación:
Descarga el archivo de animación favorito (.json) del sitio oficial de LottieFiles y colócalo en la carpeta res/raw de la aplicación.
Configuración del archivo de layout:
Añade LottieAnimationView al layout XML para que pueda hacer referencia al archivo de animación descargado.
Personalización de la animación:
Personaliza el comportamiento de la animación según sea necesario. Entre las configuraciones disponibles se incluyen:
- Con o sin reproducción en bucle
- Especificación del número de repeticiones
- Especificación de la velocidad de reproducción (incluyendo reproducción inversa)
Añadiendo procesamiento dinámico, puedes reproducir/detener en el momento que quieras y cambiar la velocidad de reproducción.
Primero, sobre la forma de especificación estática. El comportamiento de la animación cambia según las siguientes especificaciones.
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
En este ejemplo, el archivo your_lottie_animation.json se reproduce automáticamente a 0.15x de velocidad y en bucle.
A continuación, el procesamiento dinámico:
lottieAnimationView.playAnimation()
Con el procesamiento anterior se puede reproducir. Además de la reproducción, puedes cambiar la configuración para detener, cambiar la velocidad, etc. También puedes configurar un listener como el siguiente para detectar el fin de la reproducción y procesarla:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Puntos a tener en cuenta y resolución de problemas
Lottie es muy útil, pero hay algunos puntos a tener en cuenta. En particular, parece que a veces el cambio de posición de objetos no funciona como se espera. También explicaré el problema de desbordamiento de pila relacionado con el procesamiento al finalizar la animación, y el comportamiento después de onPause.
Ejemplo de resolución de problemas 1:
Fue un problema en mi implementación: la forma de gestionar el procesamiento al finalizar la animación provocó un desbordamiento de pila. Concretamente, había un problema en el procesamiento que reproducía en reversa al llegar al final de la animación y repetía la reproducción y la reproducción inversa. Resolví el problema publicando en el hilo principal y volviendo a poner en cola:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
lottieAnimationView.post {
// 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Ejemplo de resolución de problemas 2:
Otro punto a tener en cuenta es el procesamiento después de onPause. Para evitar operaciones innecesarias, se debe detener la animación en segundo plano.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Sin embargo, si hay procesamiento al finalizar la animación, etc., esto solo no fue suficiente. Por eso fue necesario verificar si la vista padre no estaba desconectada y reprocesar:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Conclusión
Lottie es una herramienta poderosa para mejorar la interfaz de usuario de las aplicaciones. Hay abundantes animaciones gratuitas disponibles y la implementación es simple. Comprendiendo los puntos de atención y tratándolos adecuadamente, puedes disfrutar de grandes ventajas en el desarrollo de aplicaciones. Aunque hay algunos puntos a tener en cuenta, en general es muy fácil de usar y hay muchos recursos gratuitos disponibles, lo que lo convierte en una biblioteca excelente. Sin duda contribuirá a mejorar el aspecto de la app, así que te recomiendo probarlo.