¿Qué es Lottie?
Lottie es un formato ligero de animación que permite animaciones de alta calidad y escalables en formato JSON. En Flowics, Lottie es particularmente útil por su capacidad de renderizar animaciones dinámicas con textos y fuentes editables, ofreciendo flexibilidad y personalización para gráficos interactivos. Su estructura basada en JSON garantiza una integración perfecta y un rendimiento optimizado en comparación con las animaciones tradicionales basadas en videos o imágenes. Estas animaciones se exportan desde Adobe After Effects utilizando el plugin BodyMovin.
Exportar After Effects a Lottie
Para exportar una animación de After Effects a un archivo JSON de Lottie, siga estos pasos:
Instale el Plugin BodyMovin:
Descargue e instale la extensión BodyMovin aquí.
2. Habilite el Acceso a Scripts:
En After Effects, vaya a Editar > Preferencias > Scripts y Expresiones.
Habilite la opción Permitir que los Scripts Escriban Archivos y Accedan a la Red.
3. Prepare la Animación para la Exportación:
Abra su proyecto y asegúrese de que las capas de texto permanezcan como texto (no convertidas a formas).
Evite caracteres especiales o funciones no soportadas, como capas de Illustrator.
No incruste fuentes al exportar.
4. Exporte Usando BodyMovin:
Vaya a Ventana > Extensiones > BodyMovin.
Seleccione su composición y abra la configuración del plugin.
Desmarque la opción Glyphs para garantizar que las capas de texto permanezcan editables.
Para incrustar imágenes rasterizadas, habilite Incluir en JSON en la sección Assets.
5. Renderice y Guarde:
Seleccione la capa, haga clic en los tres puntos y guárdela en sus archivos.
Haga clic en el botón de renderizar en BodyMovin para exportar la animación.
Una vez renderizada, haga clic en Hecho. Se generará un archivo JSON de la animación.
6. Valide la Exportación:
Pruebe la animación exportada utilizando la página de vista previa de LottieFiles y verifique problemas de compatibilidad con el verificador de soporte de funciones.
Los problemas comunes incluyen gradientes no soportados o fuentes faltantes. Por ejemplo, los gradientes pueden renderizarse como colores sólidos si están configurados incorrectamente, y las fuentes pueden necesitar cargarse manualmente.
Una vez renderizadas, Flowics procesará las fuentes, permitiendo a los usuarios cargar y seleccionar familias de fuentes a través del Editor de Gráficos.
Importar Archivos Lottie en Flowics
Suba el Archivo a la Biblioteca de Recursos:
Vaya a la Biblioteca de Recursos en el Editor de Gráficos y cargue su archivo JSON.
2. Agregue un Elemento Lottie:
Arrastre un elemento Lottie a su árbol gráfico y seleccione el archivo JSON cargado.
3. Modifique la Configuración de la Animación:
Configure opciones de reproducción, como bucle, velocidad y reproducción inversa, a través del panel de configuración.
Utilice la opción Subframes para una reproducción más fluida.
4. Contenido Editable:
Las animaciones Lottie con textos editables mostrarán campos en el Inspector.
Ajuste el texto dinámicamente durante la reproducción o mientras la animación esté pausada.
Cargue fuentes personalizadas, si es necesario, y asignelas en la página de Fuentes del Editor de Gráficos.
5. Control Remoto:
Exponga campos de texto editables para control remoto activando la sección Contenido Editable en el Inspector.
Limitaciones Conocidas y Resolución de Problemas
Tipos de Archivos Soportados:
Solo se soportan archivos .json. Los archivos .lottie no son compatibles.
2. Inclusión de Imágenes:
Las imágenes rasterizadas pueden aumentar el tamaño del archivo JSON. Ajuste las tasas de compresión si es necesario.
3. Gradientes y Caracteres Especiales:
Los gradientes pueden no exportarse correctamente si se crean con configuraciones no inglesas o plugins específicos. Consulte la Guía de Exportación de Gradientes para soluciones.
Evite usar caracteres especiales o tipos de capas no soportadas.
4. Limitaciones de Fuentes:
Solo las capas de texto y las fuentes estándar son editables. No se soporta texto basado en glifos.
5. Compatibilidad de Capas:
Para capas de Illustrator, conviértalas en formas antes de exportarlas para evitar pérdida de calidad.
6. Problemas de Renderización en BodyMovin:
Asegúrese de que los scripts estén habilitados en las preferencias y reinicie After Effects.