Visor de Lottie
Suelta un archivo Lottie JSON o .lottie para ver la animación al instante. Reprodúcela, páusala y recorre cada fotograma, cambia la velocidad y el fondo, salta a los marcadores y consulta su tamaño, velocidad de fotogramas, duración y capas.
Última actualización:
Detalles de la animación
Capas
Cómo usar Visor de Lottie
- Abre un archivo con Abrir archivo Lottie o arrastra un archivo .json o .lottie al reproductor. Al cargar se reproduce una animación de ejemplo.
- Reproduce o pausa con el botón o la barra espaciadora, y activa o desactiva el bucle.
- Arrastra el control de la línea de tiempo a cualquier fotograma, o usa los botones de avance (o las flechas del teclado) para moverte fotograma a fotograma.
- Cambia la velocidad y el fondo para comprobar los tiempos y las zonas transparentes sobre páginas claras u oscuras.
- Revisa el panel de detalles para ver dimensiones, velocidad de fotogramas, duración, capas y marcadores, y descarga el JSON si lo necesitas.
Qué hay dentro de un archivo Lottie JSON
Una animación Lottie es un único objeto JSON. Unas pocas claves de primer nivel describen el lienzo y la línea de tiempo, y un array layers contiene el contenido, que se dibuja desde la última capa (abajo) hasta la primera (arriba). Las capas de forma contienen grupos de trazados, elipses y rectángulos con rellenos, trazos y transformaciones; cualquier propiedad puede ser estática ("a": 0) o estar animada con fotogramas clave ("a": 1).
| Clave | Significado | Ejemplo |
|---|---|---|
v | Versión del formato Bodymovin/Lottie con la que se exportó el archivo | "5.7.4" |
w, h | Ancho y alto del lienzo en píxeles | 512, 512 |
fr | Velocidad de fotogramas en fotogramas por segundo | 30 |
ip, op | Punto de entrada y punto de salida (primer fotograma y el fotograma siguiente al último) | 0, 90 |
layers | Lista de capas (forma, sólido, imagen, nulo, texto, precomposición) | [ … ] |
assets | Imágenes y precomposiciones a las que las capas hacen referencia por id | [{"id":"image_0", …}] |
markers | Puntos o rangos con nombre en la línea de tiempo (tm inicio, dr duración, cm nombre) | {"tm":30,"cm":"hover","dr":20} |
fonts, chars | Fuentes y contornos de glifos para las capas de texto | {"list":[…]} |
La duración en segundos es (op − ip) ÷ fr. Una animación con ip 0, op 120 y fr 60 dura 2 segundos.
Números de tipo de capa
ty | Tipo de capa | Notas |
|---|---|---|
| 0 | Precomposición | Muestra una composición anidada de assets |
| 1 | Sólido | Un rectángulo relleno de un solo color |
| 2 | Imagen | Mapa de bits de un recurso de imagen (incrústalo como data URI) |
| 3 | Nulo | Elemento padre invisible que sirve para mover otras capas juntas |
| 4 | Forma | Formas vectoriales: el tipo más común y mejor admitido |
| 5 | Texto | Texto con datos de fuente; el resultado depende de las fuentes disponibles |
Consejos para animaciones Lottie más ligeras y fluidas
- Mantén la velocidad de fotogramas en 24-30 fps para animaciones de interfaz; 60 fps duplica los datos de fotogramas clave con poca mejora visible en iconos.
- Prefiere capas de forma en lugar de imágenes. Los mapas de bits hacen los archivos mucho más grandes y se ven borrosos al escalarlos.
- Usa marcadores para nombrar los segmentos (intro, bucle, final) y que los desarrolladores puedan reproducir solo la parte que necesitan.
- Revisa la animación sobre fondos claros y oscuros: los trazos oscuros finos suelen desaparecer en modo oscuro.
- Recorre el primer y el último fotograma para asegurarte de que una animación en bucle empieza y termina en posiciones que coinciden.
Preguntas frecuentes
¿Qué es un archivo Lottie?
Lottie es un formato de animación vectorial basado en JSON, exportado originalmente desde After Effects con el plugin Bodymovin. Guarda las formas, los fotogramas clave y los tiempos como datos, así que un reproductor puede dibujar la animación a cualquier tamaño con un archivo pequeño.
¿Cuál es la diferencia entre .json y .lottie?
Un archivo .json es la animación Lottie sin procesar. Un archivo .lottie (dotLottie) es un archivo ZIP que agrupa una o varias animaciones Lottie JSON con un manifiesto y las imágenes que usan. Este visor descomprime los archivos .lottie en tu navegador e incrusta las imágenes.
¿Se sube mi animación a algún sitio?
No. El archivo se lee y se reproduce localmente. Lo único que se descarga es la biblioteca de código abierto lottie-web, que se carga desde una CDN pública la primera vez que usas la herramienta.
¿Por qué mi animación se ve distinta que en After Effects?
Los reproductores de Lottie admiten la mayoría de las funciones de After Effects, pero no todas. Las expresiones, algunos efectos, los estilos de capa, las capas 3D y ciertos modos de fusión se admiten parcialmente o no se admiten. Limítate a formas, máscaras, transformaciones y recortes de trazado para obtener los mejores resultados.
¿Cómo se calcula la duración?
La duración en segundos es igual a (punto de salida − punto de entrada) ÷ velocidad de fotogramas. Por ejemplo, una animación con ip 0, op 90 y fr 30 dura 90 ÷ 30 = 3 segundos.
¿Por qué no se ven las imágenes de mi JSON?
Un JSON Lottie puede hacer referencia a archivos de imagen externos mediante una ruta. Si esos archivos no están incrustados como data URI, el reproductor no puede encontrarlos. Usa un archivo .lottie o exporta con las imágenes incrustadas.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.