De Flash a Lottie às máquinas de estado: a evolução da animação vetorial da Web
Como a animação vetorial da web mudou de Flash e ActionScript para as exportações After Effects de Lottie e, em seguida, para tempos de execução de máquina de estado, e o que cada etapa mudou.
Ponto principal
Flash combinou animação vetorial e interatividade em uma ferramenta, mas foi executado em um plug-in que Adobe parou de oferecer suporte após 31 de dezembro de 2020. Lottie trouxe a animação vetorial de volta ao reproduzir animações After Effects, exportadas como JSON com Bodymovin, nativamente na web e em dispositivos móveis, mas essas animações apenas são reproduzidas. Tempos de execução de máquina de estado, como Rive e ExodeUI, adicionam interatividade ao arquivo de design.
Flash: animação e lógica em um só lugar
Flash permite aos designers desenhar vetores, animá-los em uma linha do tempo e adicionar comportamento com ActionScript, tudo em um arquivo. Ele alimentou jogos, anúncios e sites inteiros. Seu ponto fraco era o plugin: ele rodava fora das tecnologias próprias do navegador, com problemas persistentes de segurança e desempenho. Adobe encerrou o suporte para Flash Player após 31 de dezembro de 2020 e bloqueou a execução do conteúdo Flash a partir de 12 de janeiro de 2021.
Lottie: vetores sem o plugin
Lottie, do Airbnb, analisa animações Adobe After Effects exportadas como JSON com o plugin Bodymovin e as renderiza nativamente na web, iOS, Android e React Native. Ele tornou o movimento vetorial rico novamente prático em aplicativos e ainda é o formato mais amplamente suportado para animações que simplesmente são reproduzidas.
A peça que faltava: interatividade
Os arquivos Lottie descrevem uma linha do tempo, não um comportamento. Fazer uma animação Lottie responder ao foco, carregamento ou sucesso significa escrever código em torno do player. Flash tinha esse comportamento integrado; o mundo sem plugins perdeu o controle.
Máquinas de estado: comportamento no arquivo novamente
Os tempos de execução da máquina de estado trazem de volta a ideia do Flash sem o plugin. Rive permite projetar animação vetorial e conectá-la a uma máquina de estado cujas entradas seu código controla. ExodeUI, que criamos, aplica a mesma ideia à UI do produto, adicionando layout, física de primavera e lógica em um arquivo JSON aberto reproduzido por tempos de execução para React, SwiftUI, Flutter e muito mais.
Princípios-chave para lembrar
- Flash combinou animação vetorial e interatividade em um plugin
- Adobe encerrou o suporte ao Flash Player após 31 de dezembro de 2020
- Lottie reproduz animações After Effects exportadas com Bodymovin, nativamente
- As animações Lottie são reproduzidas; interatividade precisa de código extra
- Os tempos de execução da máquina de estado trazem o comportamento criado de volta ao arquivo
Perguntas frequentes
Fontes
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Documentos Rive