Hola Habr!
En un momento, el propietario del producto nos pidió que pensáramos en crear un proceso efectivo para introducir la animación en nuestra aplicación de Android / iOS. En ese momento, hicimos la tarea de llenar previamente la solicitud con datos personales para un producto de préstamo, y el servidor tardó un tiempo en responder, durante el cual queríamos mostrar una hermosa animación de carga.
La tarea era clara: el diseñador quería dibujar maravillosamente, dar el código fuente a ambos
plataformas sin dopilivaniya por su parte, y para que no se quede atrás en dispositivos más antiguos (sí, todavía admitimos Android 4.1).
¿Cuáles fueron mis opciones para introducir la animación?- Bolígrafos con vectores animados dibujables. Lo bueno es que el renderizado funciona
en un hilo separado (comenzando con la api 25), las desventajas son la complejidad de crear tales animaciones y una pequeña cantidad de manipulaciones con objetos. Para animaciones simples, todo esto funciona bien, pero un poco más complicado, y comienza el infierno. Sí, y en diferentes plataformas no comenzarás. - Gif: pesan mucho, tienen un tamaño fijo, lo que significa que no se escalan normalmente. Y no harás ninguna manipulación especial con ellos.
- La secuencia png (sin comentarios).
Excavando durante algún tiempo en la dirección de la animación vectorial nativa del androide y el gif (oh Dios mío, todavía consideramos esta opción), recordé la maravillosa biblioteca Lottie y se la mostré a mis colegas.
Después de algunas pruebas con varios dispositivos, decidimos que la biblioteca debería implementarse, especialmente porque sus capacidades eran impresionantes. El diseñador estaba especialmente encantado, ahora podía hacer casi cualquier animación en Adobe After Effects y exportar a un archivo json con unos pocos clics. También estuvimos encantados, pero lo primero es lo primero.
Lottie fue inventada e implementada por Airbnb en respuesta a una creciente demanda de animación multiplataforma, por lo que funciona igual (bueno, casi) en todas las plataformas. Los propios desarrolladores afirman que su objetivo es lograr el número máximo de características de After Effects, y lo lograron. Ahora incrustar la animación de Lottie es tan fácil como insertar una imagen en ImageView.
Clases clave 3:- LottieAnimationView es el sucesor de ImageView, y la forma más fácil de usar animación. Puede describir la animación en xml, o puede hacerlo en el código, la mayoría de los métodos son compatibles.
- LottieDrawable: descendiente dibujable, con la misma funcionalidad que la clase anterior, le permite aplicar animación a cualquier vista.
- LottieComposition y su compañero LottieCompositionFactory le permiten precargar animaciones de varias fuentes y aplicarlas a LottieDrawable y LottieAnimationView.
Carga de recursos
Admite la carga de recursos desde:
- res / raw
- src / activos
- Cuerda Json
- Cualquier url de la red que conduzca a un archivo json o zip (implementado a través de HttpURLConnection, para no agregar dependencias externas. Si tiene animación con imágenes, entonces necesita usar zip)
- InputStream json o archivo zip
Almacenamiento en caché de animación
Lo bueno es que todas las animaciones descargadas a través de res / raw o activos se guardan en la memoria caché de LRU, lo que nos permite no perder el tiempo del usuario recargando y analizando la animación, ya que en el caso de animaciones complejas puede llevar algún tiempo. Lo que es aún más genial, si necesita precargar la animación y luego, en el siguiente fragmento, mostrar la animación al instante, puede usar el código
LottieCompositionFactory.fromRawRes(context, rawFile)
La animación se almacena en caché usando la clave rawFile, y donde realmente necesita usarla, comienza casi instantáneamente.
Gestión del progreso
Lottie le permite establecer el estado actual de la animación a través de setProgress (...). Esto puede ser útil si desea animar el estado de carga del archivo, la posición de desplazamiento, varios gestos, etc. Vi varias implementaciones en BottomSheets, PullToRefresh, CollapsingToolbarLayout.
Aquí se explica cómo usar el progreso con AppBarLayout:
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset -> val percent = Math.abs(verticalOffset).toFloat()/appBarLayout.totalScrollRange animationView.progress = percent })
Bucle
Lottie admite el bucle setRepeatMode () o setRepeatCount () no solo toda la animación, sino también cualquier fragmento dentro de (0.0 ... 1.0). Esto se implementa mediante las propiedades setMinFrame, setMaxFrame, setMinAndMaxFrame. Usamos esto para no implementar 3 animaciones para diferentes estados de carga de archivos: inactivo, progreso, completo. Aquí hay un pequeño fragmento de código que resuelve esto:
when (loadingStatus) { LoadingStatus.IDLE -> { animationView.setMaxProgress(0.1f) } LoadingStatus.PROGRESS -> { animationView.setMinAndMaxProgress(0.2f, 0.9f) animationView.repeatCount = LottieDrawable.INFINITE animationView.playAnimation() } LoadingStatus.COMPLETE -> { animationView.setMinAndMaxProgress(0.9f, 1f) animationView.repeatCount = 1 animationView.playAnimation() }}
Imágenes
Una de las principales ventajas de Lottie para nosotros fue que la biblioteca admite la inserción de imágenes directamente en la animación. Además, puede insertar tanto una imagen estática como una dinámica descargada de Internet. Ahora explicaré cómo funciona.
En el caso de una imagen estática, todo es simple: el diseñador descarga el archivo que contiene json más la imagen misma.
{ "v": "5.1.13", "fr": 29.9700012207031, "ip": 0, "op": 47.0000019143492, "w": 1034, "h": 1334, "nm": " 1", "ddd": 0, "assets": [ { "id": "image_0", "w": 130, "h": 436, "u": "images/", "p": "img_0.png" }, { "id": "comp_0", "layers": [ ... ]}] }
Este img_0.png, esta es la imagen que debes poner en src / assets, y que estará dentro de la animación.
Para la carga dinámica, se utiliza el método setImageAssetDelegate, al que debe pasar el mapa de bits. Precargamos la imagen con Glide, por lo que en la etapa de abrir un fragmento con animación y una imagen, todo sale del caché, por lo que todo es bastante rápido. Aquí está el código:
glideLoader.loadAsBitmap(imageUrl).into(object: CustomTarget<Bitmap>() { override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { viewAnimation.setImageAssetDelegate(object: ImageAssetDelegate { override fun fetchBitmap(asset: LottieImageAsset?): Bitmap { asset?.let { val resizeBitmap =Bitmap.createScaledBitmap(resource, it.width, it.height, true); return resizeBitmap } ?: run { return resource } } }) setAnimation(viewAnimation, animationImage) } override fun onLoadCleared(placeholder: Drawable?) {} })
Rendimiento
Por supuesto, es mejor no usar mucha animación en pantallas donde el usuario pasa mucho tiempo, ya que es exigente con el procesador. Según nuestras pruebas, la carga del procesador en algunas animaciones alcanza el 20%. Por lo tanto, el caso ideal de tal animación son elementos interactivos que se disparan una vez.
Si la animación en algunos dispositivos se ralentiza, a veces ayuda
viewAnimation.useHardwareAcceleration(true)
Sin embargo, los desarrolladores recomiendan usar este método con precaución, ya que diferentes teléfonos usan la aceleración de hardware de diferentes maneras, por lo que en lugar de la aceleración, puede obtener el efecto contrario.
Conclusión
En general, el uso de la biblioteca Lottie simplifica enormemente la implementación de la animación en la aplicación.
Las principales ventajas de lottie que destacamos:- Tamaño de biblioteca pequeña (300 kb)
- Solución multiplataforma ios / android / web
- Descargar animaciones de la web
- Gestión del progreso y bucles en cualquier lugar
- Una gran cantidad de características de los efectos posteriores le permite al diseñador realizar el efecto deseado.
Contras:- El renderizado se realiza en el hilo principal, y los fps pueden caer significativamente en la aplicación.
- Analizar animaciones de lotería puede tomar un tiempo considerable con animaciones complejas.
Por cierto, para comprobar qué tan intensiva es la animación de recursos, puede usar la aplicación oficial
Lottie de Google Play . Hay un gráfico de renderizado donde puede ver el tiempo para renderizar un cuadro, y también ver cómo se verá la animación si la corta en cuadros, o cómo afectará la aceleración de hardware y mucho más.