Las animaciones están en todas partes en las aplicaciones de consumo de hoy. Las empresas los usan para llamar la atención, guiar a los usuarios y crear esa sensación memorable y de marca, ya sea una pantalla de salpicadura encantadora, un indicador de carga suave o pancartas festivas durante temporadas especiales. Como desarrollador nativo de React, sabemos cuánto impacto puede tener una buena animación en el flujo / producto.
En los últimos años, Lottie Animations (exportadas como .json archivos) se han vuelto muy populares. Hacen que sea fácil agregar animaciones ricas y escalables sin afectar el rendimiento. Pero hay una cosa con la que la mayoría de nosotros nos hemos encontrado es que los archivos Lottie JSON pueden hacerse bastante grandes. Incluso las animaciones de aspecto easy pueden hincharse en cientos de kilobytes o más, especialmente si tienen muchas capas animadas. Para aplicaciones que muestran varias animaciones como pasos de incorporación, pancartas dinámicas, insignias de logros, and so forth., esto conduce a desafíos reales.
El formato .lottie: más pequeño y más ligero
Lottie admite un optimizado formato llamado .lottie. En lugar de un archivo JSON sin procesar, un .lottie La animación es un archivo con cremallera que cut back el tamaño del archivo en un 70-80% en comparación con JSON easy, por lo que nuestra animación de 1 MB podría convertirse en 200-300 kb. También empaqueta todos los activos (incluidas las imágenes) juntos, reduciendo los problemas de activos faltantes. Es splendid para aplicaciones dinámicas donde el contenido de animación puede cambiar a través de configuraciones, lo cual es excelente para equipos de advertising and marketing, pancartas de temporada o personalización del usuario.
Por lo basic, tenemos dos opciones para incluir animaciones Lottie en nuestra aplicación.
- Animaciones de agrupación en la aplicación
- Este método repleta a todos sus jsons Lottie dentro de la reproducción de la aplicación de la aplicación rápida y fuera de línea. Pero a medida que agrega más animaciones, el tamaño de su aplicación aumenta y cada pequeño ajuste de animación significa una nueva versión de la aplicación.
- Cargando animaciones a través de la crimson
- Alternativamente, puede alojar sus animaciones en un servidor remoto o CDN (como S3). Esto mantiene la descarga de su aplicación ligera y permite actualizaciones más flexibles. El inconveniente? Cada vez que se muestra una animación, su aplicación la obtiene nuevamente. Los usuarios con conexiones lentas o poco confiables pueden quedarse atascadas en espera, o ver animaciones fallidas/faltantes. Además, desperdicia datos móviles.
Entonces, ya sea que bunda o cargue la crimson, cambiando a .lottie ya te da beneficios de tamaño. Pero hay margen para una mejor experiencia, con solo unos pocos ajustes pequeños, puede hacer que toda la experiencia se sienta mucho más suave y confiable.
¿Cómo podemos hacer el .lottie ¿Experiencia aún mejor?
Desde .lottie Los archivos son solo JSON con cremallera Con las imágenes (opcionales), podemos tratarlas exactamente como cualquier archivo de cremallera estándar: extraerlas, procesar la animación JSON como nos guste y almacenar un JSON listo para usar, todo en uno y almacenarlos en caché localmente para el próximo uso de nuestra aplicación. Esto nos brinda reproducción de animación suave y versatile en cualquier dispositivo, en cualquier condición de crimson, cada vez. Aquí hay un easy flujo de trabajo que podemos seguir
Después de estos pasos, puedes cargar y jugar el JSON como cualquier lottie common. Entonces cuando obtienes un .lottie Archivo, primero verifique si ya existe una versión JSON procesada: si lo hace, úselo. Si no, descárguelo, procese como JSON, guárdelo y lo reutilice la próxima vez.
1. ⬇️ Descargar el archivo de animación
Primero, descargue el .lottie y guárdelo localmente usando un nombre único.
const identify = extractNameFromUrl(url)
const extension = url.match(/.(json|lottie)$/)?.[1] ?? 'json';
const lottiePath = RNFB.fs.dirs.DocumentDir + `/lottie/${identify}.${extension}`;
await RNFB.config({
path: lottiePath,
}).fetch('GET', url, headers);
2. 📦 Descomprimir el .lottie Archivo
Si la animación está en .lottie Formato, tenemos que descomprimirlo. Esto extraerá los datos de animación JSON y cualquier imagen que haga referencia.
if (extension === 'lottie') {
const extractPath = `${RNFB.fs.dirs.DocumentDir}/${identify}_unzipped`;
await unzip(lottiePath, extractPath);
}
3. 🧩 Extraer y procesar la animación JSON
Dentro de la carpeta desabrochable, busque un animations carpeta. Encuentra el archivo JSON de animación:
const animationsPath = `${extractPath}/animations`;
const information = await RNFB.fs.ls(animationsPath);
const animFile = information.discover(file => file.endsWith('.json'));
if (!animFile) throw new Error('No animation JSON discovered after unzip');
const animPath = `${animationsPath}/${animFile}`;
4. 🖼️ Ins INSCRIVE INTRO DE LA ANIMACIÓN JSON
A veces, el Lottie usa imágenes separadas (digamos, fondos, iconos, activos principales). Para hacer que Rendering sea rápido, podemos incrustar estas imágenes directamente en el archivo JSON. Esto significa convertir archivos de imagen a base64luego actualizando el JSON para que todas las imágenes estén empaquetadas en línea. Básicamente, si inspecciona el JSON antes de incrustarlo, parece algo a la izquierda, ahora estamos encontrando la imagen actual con el u y p llaves en el json y luego convertirlas en base64 y actualizar las claves con estos valores para obtener nuestro JSON last. Aquí u Especifica la carpeta de imagen o la ruta del directorio y p Especifica el nombre de archivo de la imagen.
A continuación se muestra el código pseudo para este proceso.
perform embedImagesInLottieJSON(animationJsonPath, imagesFolderPath):
// Learn the animation JSON as textual content
animationJsonText = readFile(animationJsonPath, asText)
animationJson = parse(animationJsonText)
// If there are not any belongings, simply return authentic JSON
if animationJson.belongings just isn't an array:
return animationJsonText
for every asset in animationJson.belongings:
if asset.u exists AND asset.p exists AND "photographs" in asset.u AND asset.e == 0:
// Get the picture file path
imagePath = imagesFolderPath + "/" + asset.p
// If the picture exists
if fileExists(imagePath):
// Learn picture as base64
imageBase64 = readFile(imagePath, asBase64)
// Discover out file kind
extension = getFileExtension(asset.p)
mimeType = (extension in ["jpg", "jpeg"]) ? "picture/jpeg" : "picture/png"
// Exchange asset path with base64 information URI
asset.u = ""
asset.p = "information:" + mimeType + ";base64," + imageBase64
asset.e = 1 // marking it as embedded
return stringify(animationJson)
Toda la imagen referenciada ahora está empaquetada directamente en el archivo JSON. Después de esta incrustación, guarde su JSON procesado en una carpeta “procesada” para una reutilización instantánea:
const processedDir = `${extractPath}/processed`;
const processedDirExists = await RNFB.fs.exists(processedDir);
if (!processedDirExists) {
await RNFB.fs.mkdir(processedDir);
}
const processedJsonPath = `${extractPath}/processed/embedded.json`;
await RNFB.fs.writeFile(processedJsonPath, embeddedJSON, 'utf8');
¿Cómo sabes que un lottie está descargado y listo?
Es mejor mostrar la pantalla o entrada relevante solo después de que Lottie esté completamente procesada, especialmente si su animación es una parte esencial del flujo de usuario. Antes de mostrar la animación, verifique si el archivo JSON procesado (embedded.json) existe. Si es así, puedes jugarlo de inmediato. De lo contrario, primero haga los pasos de descarga de unión.
const isLottieProcessed = async (animationName) => {
const processedJsonPath = `${RNFB.fs.dirs.DocumentDir}/${animationName}_unzipped/processed/embedded.json`;
return await RNFB.fs.exists(processedJsonPath);
};
Por qué este enfoque es mejor
- Experiencia más rápida: Las animaciones se cargan instantáneamente después de la primera descarga de crimson o uso de datos repetidos.
- Fuera de línea confiable: Todos los activos están incrustados; Nada se rompe cuando el usuario está fuera de línea o tiene una mala conectividad.
- Mando a distancia: Los equipos de advertising and marketing y productos pueden cambiar o actualizar animaciones sobre la marcha, sin enviar una nueva aplicación.
- Aplicaciones Lean: Su tamaño APK o IPA se mantiene pequeño y ágil, incluso con docenas de hermosas animaciones de lottie.
Una pequeña captura en este enfoque es cuando queremos actualizar o cambiar algo en una animación Lottie, generalmente terminamos guardándolo con un nuevo nombre. Eso inicia la descarga completa, descompone e incrusta el proceso nuevamente, lo que puede conducir rápidamente a animaciones duplicadas que se acumulan en el dispositivo, todo con contenido o versiones ligeramente diferentes.
La solución easy aquí es usar versiones en nuestros archivos de nombres de nombre de archivo nuestro archivo first-v1.lottie, first-v2.lottie and so forth. de esta manera, cada vez que realizamos cambios, simplemente aumente la versión en el nombre del archivo. Luego, en nuestra lógica de extracto o almacenamiento en caché, podemos eliminar fácilmente cualquier versión anterior y mantener solo la más reciente en el dispositivo. Esto guarda el almacenamiento y se asegura de que los usuarios siempre obtengan la animación correcta y actualizada sin duplicados innecesarios.
Si no has probado .lottie Sin embargo, probablemente se esté perdiendo algunas victorias fáciles, es posible que valga la pena explorar este enfoque.
