Los problemas de rendimiento de Lottie generalmente provienen del archivo, no del reproductor. After Effects facilita la adición de funciones que resultan costosas de representar cuadro por cuadro en un teléfono.
Comience con el archivo. Las máscaras y los mates de pista suelen ser los que cuestan más; reemplácelos con formas más simples cuando sea posible. Elimina efectos y desenfoques que el jugador no necesita. Fusiona formas, reduce el número de capas y precompone con cuidado. Las imágenes incrustadas de gran tamaño añaden memoria y costes de decodificación, así que optimícelas o reemplácelas con vectores. Un inspector Lottie, como nuestro visor gratuito Lottie JSON, le ayuda a ver lo que hay dentro de un archivo.
Luego comprueba cómo lo reproduce la aplicación. Las animaciones que se repiten cuando están fuera de la pantalla, dentro de una pestaña cerrada o en una celda de lista que se desplaza hacia afuera todavía usan la CPU y la batería. Pausarlos cuando no sean visibles y detener los bucles que no sean necesarios. Evite reproducir docenas de animaciones a la vez.
Elija las opciones adecuadas para su plataforma. En la web, los renderizadores SVG y Canvas funcionan de manera diferente según la animación, así que pruebe ambos. El formato comprimido .lottie (dotLottie) reduce el tamaño de la descarga. En Android, pruebe con aceleración de hardware donde su reproductor la admita.
Finalmente, mida en un dispositivo de gama baja. Si una animación todavía es demasiado pesada, puede ser la herramienta incorrecta para el trabajo: una simple CSS o una animación nativa puede reemplazar un bucle decorativo, y los componentes interactivos pueden construirse mejor en una herramienta basada en estados como Rive o ExodeUI, que fabricamos nosotros.