Vista previa de animaciones Lottie

Funciones

• Arrastra un .json y se reproduce; velocidad ajustable (0,25× / 0,5× / 1× / 2×)
• Línea de tiempo arrastrable para ver fotograma a fotograma, con lectura de actual/total
• El fondo alterna entre tablero, claro y oscuro: el tablero revela la transparencia
• Datos de la composición: tamaño, fotogramas por segundo, fotogramas, duración, capas, nombre, versión de bodymovin y generador
• Revisión para la entrega: expresiones, imágenes incrustadas o enlazadas, exceso de fotogramas por segundo, duración excesiva, composición sobredimensionada, exportaciones antiguas
• No se sube nada; el reproductor solo se descarga cuando se arrastra un archivo (es la dependencia más grande del sitio)
• Un archivo que no es Lottie recibe una frase clara en vez de un panel en blanco

Cómo se usa

1. Arrastra el Lottie JSON a la zona de puntos
2. Reproduce, ralentiza y desplázate: mira la animación en sí
3. Lee los datos de composición y la revisión de entrega a la derecha
4. Usa esas conclusiones para decidir si reexportar (fijar expresiones, incrustar imágenes, bajar los fotogramas por segundo)

Preguntas frecuentes

¿Por qué me avisa de que usa «expresiones»?

Porque es la trampa más habitual al portar. Las expresiones de Lottie (scripts escritos en propiedades en After Effects, guardados en un campo `x`) sí se ejecutan en un navegador —esta vista previa es la prueba—, pero muchos reproductores móviles no las admiten: algunas versiones de react-native-lottie y varios componentes de miniprogramas no lo hacen, y entonces la animación se queda quieta o mal colocada mientras el desarrollador culpa primero a la versión del reproductor. Para usarla en esas plataformas, convierte las expresiones en fotogramas clave en After Effects antes de exportar.

¿Por qué un archivo con expresiones me pide confirmar?

Porque las expresiones de Lottie son JavaScript: el reproductor tiene que ejecutarlas como código para calcular los valores de la animación, así que un `.json` con expresiones no es solo datos. En un editor de texto, en Git, es texto plano; solo se ejecuta cuando un reproductor lo lee, y «previsualizar un archivo» parece una acción de solo lectura, así que esta página no toma esa decisión por ti. Antes de confirmar merece la pena preguntarse de dónde salió el archivo. Uno exportado por ti o que te dio un colega: adelante. Uno descargado de un banco de recursos, un chat o un archivo adjunto: espera, ábrelo en un editor de texto y busca `"x":`. Si lo que sigue es una expresión legible o un bloque de código sospechoso, lo sabrás. También conviene limpiarlo antes de entregarlo: entregar un Lottie con expresiones es entregar además un trozo de código ejecutable.

¿Qué diferencia hay entre imágenes incrustadas y enlazadas?

Los mapas de bits de un Lottie viven de dos formas: incrustados (convertidos en data URI dentro del mismo JSON) o enlazados (el JSON guarda solo una ruta relativa y las imágenes son archivos aparte). Los incrustados son autocontenidos y portables pero grandes; copiar un JSON enlazado por su cuenta pierde las imágenes, y los reproductores normalmente no avisan: simplemente faltan piezas, y es fácil culpar a la animación. Cuál elegir depende del uso: los iconos pequeños distribuidos por CDN van bien incrustados; las imágenes grandes, enlazadas.

¿Por qué un exceso de fotogramas por segundo es un desperdicio?

Porque la mayoría de pantallas —las de móvil sobre todo— se refrescan a 60 Hz, así que los fotogramas por encima de eso no se muestran nunca, mientras que Lottie escribe datos por fotograma en el archivo (los fotogramas clave interpolados se calculan uno a uno). Los fotogramas extra añaden peso y no cambian nada visualmente. 60 fps ya es el techo de fluidez y 30 fps basta para casi toda la animación de interfaz: bajar a cualquiera de los dos suele reducir el archivo de forma notable.

¿Esta vista previa coincide con cómo se verá en un proyecto real?

Exactamente, porque ambas usan el mismo reproductor: `lottie-web`, la implementación oficial de Airbnb. Un proyecto web también lo usa; los miniprogramas y React Native usan sus propios ports, y ahí es donde el comportamiento puede diferir. Así que el uso más valioso de esta página es: confirma aquí que la animación está bien y luego valida el port en la plataforma de destino. Ralentizar a 0,25× es también la mejor forma de revisar el detalle: los tirones, desalineaciones y problemas de capas invisibles a velocidad normal aparecen al instante.