De Flash a Lottie y máquinas de estados: la evolución de la animación vectorial web
Cómo la animación vectorial web pasó de Flash y ActionScript a las exportaciones After Effects de Lottie y luego a tiempos de ejecución de máquina de estado, y qué cambió en cada paso.
Idea clave
Flash combinó animación vectorial e interactividad en una herramienta, pero se ejecutó en un complemento que Adobe dejó de admitir después del 31 de diciembre de 2020. Lottie recuperó la animación vectorial reproduciendo animaciones After Effects, exportadas como JSON con Bodymovin, de forma nativa en la web y en dispositivos móviles, pero esas animaciones solo se reproducen. Los tiempos de ejecución de máquinas de estado como Rive y ExodeUI añaden interactividad al archivo de diseño.
Flash: animación y lógica en un solo lugar
Flash permitió a los diseñadores dibujar vectores, animarlos en una línea de tiempo y agregar comportamientos con ActionScript, todo en un solo archivo. Impulsaba juegos, anuncios y sitios web completos. Su debilidad era el complemento: se ejecutaba fuera de las propias tecnologías del navegador, con problemas persistentes de seguridad y rendimiento. Adobe finalizó el soporte para Flash Player después del 31 de diciembre de 2020 y bloqueó la ejecución del contenido Flash a partir del 12 de enero de 2021.
Lottie: vectores sin el complemento
Lottie, de Airbnb, analiza animaciones Adobe After Effects exportadas como JSON con el complemento Bodymovin y las renderiza de forma nativa en la web, iOS, Android y React Native. Hizo que el movimiento vectorial enriquecido volviera a ser práctico en las aplicaciones y sigue siendo el formato más compatible para animaciones que simplemente se reproducen.
La pieza que falta: la interactividad
Los archivos Lottie describen una línea de tiempo, no un comportamiento. Hacer que una animación Lottie responda al desplazamiento, la carga o el éxito significa escribir código alrededor del reproductor. Flash tenía ese comportamiento incorporado; el mundo sin complementos lo perdió.
Máquinas de estados: comportamiento en el archivo nuevamente
Los tiempos de ejecución de la máquina de estado recuperan la idea de Flash sin el complemento. Rive le permite diseñar animaciones vectoriales y conectarlas a una máquina de estado cuyas entradas controla su código. ExodeUI, que creamos, aplica la misma idea a la interfaz de usuario del producto, agregando diseño, física de resortes y lógica en un archivo JSON abierto reproducido por tiempos de ejecución para React, SwiftUI, Flutter y más.
Principios clave para recordar
- Flash combinó animación vectorial e interactividad en un complemento
- Adobe finalizó el soporte del reproductor Flash después del 31 de diciembre de 2020
- Lottie reproduce animaciones After Effects exportadas con Bodymovin, de forma nativa
- Se reproducen animaciones Lottie; la interactividad necesita código adicional
- Los tiempos de ejecución de la máquina de estado devuelven el comportamiento creado al archivo
Preguntas frecuentes
Fuentes
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Documentos Rive