Crear Animaciones Lottie Gratis: Exporta, Importa y Edita Lottie en Brinimate
Brinimate exporta tus animaciones 2D a Lottie (JSON) para webs y apps, y abre cualquier Lottie para editarlo con capas, símbolos y keyframes. Gratis, en el navegador y sin After Effects.
LuisOA
Equipo Brinimate
Animaciones Lottie en Brinimate
Lottie es el formato de animación que usan las webs y las apps: un archivo JSON con formas vectoriales y keyframes, que pesa poco, se ve nítido en cualquier pantalla y se reproduce con una línea de código. Hasta ahora, para crearlo había que pasar por After Effects y un plugin. Desde hoy Brinimate exporta e importa Lottie (beta), gratis y en el navegador.
La escena del inicio de brinimate.com, hecha en el editor y exportada a Lottie.
La animación del inicio de esta web y la del corazón que late más abajo son Lottie reales exportados desde Brinimate. Puedes abrirlas en el editor con un clic y ver cómo están hechas.
Exportar a Lottie
- Anima como siempre: capas, fotogramas clave (F6), interpolaciones y símbolos.
- Abre Exportar → Exportar Lottie (beta).
- Revisa la vista previa, elige fondo transparente o de color y pulsa Descargar Lottie (.json).
Las dos opciones nuevas, en el menú Exportar.
La vista previa usa el reproductor oficial de Lottie (lottie-web). Lo que ves ahí es exactamente lo que verá quien use tu archivo.
Tamaño, número de fotogramas y peso del archivo antes de descargarlo.
Qué se convierte en qué
Brinimate no graba tu animación como una secuencia de imágenes: la traduce, para que el archivo siga siendo liviano y editable.
| En Brinimate | En Lottie |
|---|---|
| Un elemento que se mueve entre keyframes | Una capa con posición, escala, rotación y opacidad animadas |
| Interpolación Lineal, Suave, Arranque o Frenado suave | Keyframes con la misma curva Bézier |
| Rebote y Elástico | Un keyframe por fotograma con la curva exacta |
| Cambio de forma | Un trazado animado (puntos que se transforman) |
| Símbolos | Precomposiciones: el dibujo se guarda una vez y se reutiliza |
| Rectángulos, elipses, pluma, SVG importados | Formas vectoriales con relleno y trazo |
| Imágenes | Imágenes incrustadas en el JSON |
| Pinceles con textura | Imagen (Lottie no tiene texturas) |
La escena del inicio tiene 10 capas, 120 fotogramas y 26 símbolos, y el Lottie pesa 22 KB comprimido.
Importar y editar un Lottie
Abre un .json de Lottie con Exportar → Importar Lottie (beta) (o con Archivo → Abrir). Brinimate lo convierte en un proyecto normal:
- Cada capa de Lottie se vuelve una capa del timeline, con su nombre.
- El dibujo de cada capa se vuelve un símbolo con rutas vectoriales de verdad, que puedes editar con la pluma, el bote de pintura o la selección directa.
- El movimiento se vuelve keyframes con las curvas del editor. Brinimate elige solo los keyframes necesarios: donde una curva no reproduce el original con menos de medio píxel de error, agrega uno más.
Un Lottie importado: capas con nombre y keyframes listos para editar.
Funciona con padres, precomposiciones, grupos con transformación, rectángulos, elipses, estrellas, trazados animados, rellenos y trazos. Los degradados entran con su primer color. Las máscaras, los mates y los efectos todavía no se importan; el editor avisa cuando un archivo los usa.
Para desarrolladores y diseñadores UI/UX
Un Lottie de Brinimate se usa igual que cualquier otro:
<div id="anim"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light.min.js"></script>
<script>
lottie.loadAnimation({ container: document.getElementById('anim'), renderer: 'svg', loop: true, autoplay: true, path: '/mi-animacion.json' });
</script>Sirve para microinteracciones (un “me gusta”, un check de éxito, un cargando), ilustraciones animadas en una landing o personajes en una app móvil, sin pagar una suscripción ni instalar nada.
Estado: beta
Lottie está en beta: la exportación y la importación ya funcionan con los proyectos normales, y seguimos sumando lo que falta (máscaras, cámara, imágenes dentro de símbolos). Si un archivo no sale como esperabas, escríbenos desde el botón Feedback del editor.