- Lottie é um formato de arquivo aberto para animações em gráficos vetoriais, permitindo reproduzir com facilidade na web e em dispositivos móveis animações criadas no Adobe After Effects
- As animações são armazenadas em formato JSON, contendo todos os elementos da animação, como keyframes, curvas de easing e informações de camadas
- Esse formato é um padrão aberto com extensibilidade, independência de resolução e diversas implementações de renderização, e muitas empresas o utilizam para melhorar a experiência do usuário
- A Lottie Animation Community (LAC) é um projeto open source sem fins lucrativos ligado à Linux Foundation, com o objetivo de desenvolver esse formato como padrão da indústria
- Especificação, ferramentas de validação, implementações e roadmap são desenvolvidos e publicados pela comunidade, que opera com uma estrutura transparente e colaborativa aberta à participação de qualquer pessoa
O que é Lottie
Visão geral
- Lottie é um formato open source de animação vetorial desenvolvido em 2015 por Hernan Torrisi
- Animações criadas no After Effects podem ser exportadas como arquivos Lottie JSON e reproduzidas em diversas plataformas
- Hoje, é um formato padrão amplamente utilizado em várias plataformas, como web, mobile e TV
Características
- Baseado em gráficos vetoriais
- Em vez de pixels, é composto por formas geométricas (linhas, curvas etc.), permitindo imagens nítidas independentemente da resolução
- Tweening
- Método que interpola automaticamente as mudanças entre keyframes definidos pelo animador
- Permite criar animações suaves sem precisar montar movimentos complexos manualmente
- Formato baseado em JSON
- Por ser expresso em JSON, é fácil de transmitir na web e simples de editar com ferramentas existentes ou processar por automação
- Por ser um padrão aberto, qualquer pessoa pode criar implementações, com ótima interoperabilidade
- Ecossistema maduro
- Há um ecossistema bem estabelecido com players, assets, ferramentas de criação e bibliotecas
- Muitas empresas, como Airbnb e Google, já o utilizam, e ele é suportado por várias ferramentas e frameworks
Lottie Animation Community (LAC)
- Comunidade sem fins lucrativos criada sob a Linux Foundation para padronizar e difundir o Lottie
- Tem como objetivo estabelecer o formato de arquivo Lottie como padrão de animação multiplataforma
- Opera sob a governança da Joint Development Foundation e busca uma forma aberta de colaboração
- Fornece a base do ecossistema por meio de documentação clara da especificação, ferramenta de validação (Validator), lista de implementações e roadmap
- Com uma estrutura em que qualquer pessoa pode participar e contribuir, enfatiza a transparência e a evolução guiada pela comunidade
1 comentários
Comentários do Hacker News
Toda vez que uso Lottie fico com aquela sensação de desperdício: a ideia é realmente ótima, e é atraente poder extrair animações direto das ferramentas que os animadores já usam, mas a implementação é decepcionante demais. Para esse tipo de coisa, um formato binário bem mais compacto seria muito mais adequado, mas resolveram armazenar blocos de dados numéricos em JSON. Além disso, como JSON pode referenciar arquivos externos, na prática você acaba com vários arquivos dentro de uma pasta, ou com arquivos embutidos em base64 dentro do JSON, ou então tudo empacotado em um único arquivo comprimido. Na web, isso significa carregar um SDK enorme, e a animação ou busca vários arquivos separadamente, ou processa o mesmo arquivo várias vezes com parsers diferentes (JSON, base64, png, lottie, zip etc.). Se você usa arquivos
.lottie, ainda precisa incluir um descompressor de zip no bundle JS, e o player separado de.lottieinclui um blob wasm de 2 MB, sem que eu entenda muito bem por quê. No nosso app, isso deu um trabalhão enorme para reduzir o tamanho final, e felizmente não usamos isso no caminho crítico, então paramos por aí. Foi preciso muito retrabalho: otimização de animações, correções manuais de paths e problemas de inline, lidar com bugs em que vetores viravam png etc. E, além disso, navegadores não aguentam tão bem várias animações ao mesmo tempo, especialmente em dispositivos mais fracos; a eficiência do processamento em JS e DOM ficou bem abaixo do que eu esperava. Se eu tiver tempo como projeto de fim de semana, penso em testar se converter isso para sprites SVG otimizados e reproduzir com transições CSS melhora as coisasConcordo totalmente, e o fluxo de exportação do After Effects para Lottie era especialmente horrível. Muitas camadas e estilos simplesmente não funcionavam direito na exportação, então era preciso explicar item por item ao motion designer quais recursos podiam ou não ser usados, e os designers claramente não gostam disso. Na prática, renderizar tudo como vídeo e reproduzir de acordo com a interação acabava sendo bem mais leve e exigia menos trabalho. Já ouvi falar do Rive, e parece focar justamente em corrigir esses problemas do Lottie. Ainda não usei pessoalmente, então o resultado pode variar bastante de caso para caso
Na empresa onde trabalhei antes, o bundle do webapp tinha 8 MB (cerca de 2 MB comprimido), e descobri que a maior parte disso vinha da biblioteca do Lottie (2 MB) e de apenas quatro animações. Removemos duas delas e deixamos as restantes para lazy loading junto com o Lottie. Mesmo assim, não consegui convencer designers e outros desenvolvedores de como um bundle de 8 MB era um problemão, então no fim fiquei com a sensação de ter perdido essa batalha
Também concordo com a parte de que navegadores não aguentam bem várias animações Lottie ao mesmo tempo. Já no começo dos anos 2000 havia muitas páginas lotadas de anúncios animados em Flash, e embora houvesse problemas de desempenho, aquilo rodava até em CPUs single-core da época
Por outro lado, JSON comprimido fica muito pequeno e também costuma ser eficiente para carregar na VM de JavaScript
Quando usei Lottie, a escolha era entre mp4 e Lottie. Comparado a mp4, o Lottie era muito menor
Gosto da ideia de gerenciar animações em um formato comum e aberto. Mas me incomoda que, na prática, muitos desenvolvedores web escolham Lottie com facilidade demais — adicionando algumas centenas de KB só em bibliotecas/wrappers, além do peso extra de cada animação — em vez de estudarem mais CSS ou animações SVG, que são bem menores e mais fáceis de ajustar. Também não gosto do fato de o site principal do Lottie se gabar do tamanho reduzido dos arquivos comparando só com GIF e PNG, sem comparar com animações em SVG/CSS. Dito isso, em apps móveis nativos parece combinar bem
O principal valor do Lottie não está em animações simples como transições CSS, mas em animações muito mais complexas e livres, quase como pequenos desenhos animados. Dá para ver isso claramente nos stickers animados do Telegram feitos com Lottie (exemplo: https://tlgrm.eu/stickers/Princess)
Pela minha experiência, onde o Lottie realmente brilha é como formato de destino para ferramentas de autoria de design, especialmente o After Effects. O artigo citado menciona exatamente esse ponto como a vantagem original do Lottie e do formato de arquivo. Ninguém escreve isso manualmente. Sou desenvolvedor de apps móveis e já trabalhei com animações em Lottie, mas nunca fui quem as produziu
Sobre a ideia de que “deveríamos aprender mais CSS ou animações SVG”, eu acrescentaria: o Flash da Web 1.0 era excelente. CSS e outros padrões ainda não alcançaram de verdade a experiência que o Flash oferecia. Flash era formato de vídeo, formato de animação, ambiente de programação, player de vídeo, sistema de UI interativa, engine de jogos, engine para desenvolver MMO, ferramenta de infográficos — fazia de tudo. Se a Adobe tivesse aberto o formato e o player, ele talvez ainda existisse hoje. Precisamos abandonar a ideia fixa de que CSS/SVG/HTML/JS são o único caminho; depois de 40 anos ainda continuamos esbarrando em problemas parecidos, então talvez valha a pena reinventar a roda
Será que não daria para compilar animações Lottie em SVG+JS? Imagino que só falte uma ferramenta para isso
Animações CSS (e a Web Animations API moderna) podem usar aceleração por hardware, enquanto bibliotecas desse tipo, como Lottie, não
Tenho pelo menos um pouco de experiência com embedding e implementação tanto de Lottie quanto de Rive, e o Rive foi uma experiência muito melhor. Se eu tiver que escolher entre Lottie e Rive no futuro, queria saber se estou deixando passar alguma coisa
Nunca usei Rive diretamente, mas acompanho a evolução. Acho interessante que o desenvolvedor que criou o Lottie entrou para a equipe do Rive há uns dois anos. Ao avaliar novas ferramentas nessa área, certamente vou considerar o Rive. Nos projetos em que trabalhei, fui bastante contra o uso de Lottie porque era difícil justificar o tamanho dos arquivos para o tipo de animação que o designer queria. Também já usei SVGator com bons resultados. E é frustrante ver o Lottie sendo superpromovido em muitos lugares — especialmente em ferramentas como Webflow e por influenciadores da área — sem mencionar o problema do tamanho dos arquivos. Tenho certeza de que existe um caso de uso ideal para o Lottie, mas, para a maioria dos usos comuns, acho que há opções melhores
Eu nunca tinha ouvido falar do Rive, mas parece algo que pode servir para o meu projeto, então foi uma descoberta empolgante. É por esse tipo de informação que não consigo largar o HN
A biblioteca de UI da nossa empresa usa
lottie-webem componentes animados, como spinner e barra de progresso. Mas, se você visitar https://airbnb.io/lottie/#/community-showcase, o cooler do notebook da empresa dispara como se fosse decolar. Fico pensando que, se isso tivesse sido feito em CSS, não causaria esse impactoO conceito do Lottie é muito legal, mas, na prática, trabalhar com ele é bem difícil. O Rive é uma plataforma nova que tenta resolver justamente os pontos problemáticos do Lottie. Em especial, atualizar dados dinamicamente é algo quase impossível com Lottie. Mesmo assim, nós implementamos uma animação com atualização dinâmica de dados usando Lottie no Valorant Backtrack do Tracker.GG, um formato parecido com o Spotify Wrapped (demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). Para isso, acessamos diretamente camadas nomeadas no arquivo-fonte do After Effects e fizemos cada slide virar um arquivo Lottie separado, implementando manualmente transições suaves entre os slides. O próprio Lottie não oferece suporte nativo para acesso dinâmico a camadas, então criamos uma biblioteca separada para controlar as instâncias de Lottie e construímos por cima dela nossa própria camada de controle de dados. Exigiu um enorme vai e vem entre designers e engenheiros, e é um formato ruim para colaboração. Em alguns casos, tivemos até que usar truques como mirar propriedades da camada pelos valores padrão reais, como a cor. O formato em si é realmente muito difícil de lidar. No futuro, quero experimentar o Rive
Usamos Lottie há anos nas animações de marca da PBS KIDS. Em comparação com outros formatos, ele traz várias vantagens, e embora o desempenho caia quando o rendering em tempo de execução aumenta muito em 2D plano, ele se integra razoavelmente bem a vários pipelines — jogos, apps e vídeo. Em dispositivos e plataformas mais limitados, como Roku, geralmente entregamos imagens estáticas no lugar. Graças ao fluxo com After Effects, um único designer pode criar uma animação em loop e exportar tudo: json do Lottie/Bodymovin, Mov para transmissão/YouTube e SVG para dispositivos de menor capacidade. Desde o fim do Flash, ele foi um ótimo formato provisório. Agora também usamos Rive, e conseguimos levar animações json existentes para o novo fluxo de trabalho. Já colaborei com nomes importantes dessa área, como Mat Groves, do Pixi, e Matt Karl, da CloudKid, e na transição do Flash cada um tentava uma abordagem diferente, com plugins, matemática e formatos de exportação distintos. Cada um desses esforços tem seu lugar, e problemas de interoperabilidade entre formatos sempre vão existir por causa da estrutura de software da animação baseada em timeline. No fim, o importante é escolher a ferramenta mais adequada para o projeto
Usamos o lottielab para criar as animações do nosso site (https://resonancy.io), e o editor é realmente muito bem-feito com base em SVG, provavelmente o melhor entre as ferramentas online. No geral, a experiência foi suave. Mas, se você não exportar usando o serviço proprietário de hospedagem comprimida do lottielab, o tamanho das animações fica grande demais para usar numa landing page. A hospedagem comprimida reduziu o tamanho em média em 400%, então acabamos pagando US$ 30 por mês por isso. Vou procurar formatos alternativos, mas não quero repetir todo o processo de produção das animações. Pela minha experiência anterior com bibliotecas de animação baseadas em React, criar animações complexas manualmente era trabalhoso demais, enquanto no lottielab consegui fazer com relativa facilidade algo próximo do que eu imaginava. Ainda não usei Rive, mas pretendo testar. Também gostaria de recomendações de ferramentas ou bibliotecas externas que comprimam bem o formato Lottie
Não entendo por que SWF seria um problema. A especificação é pública e ele é muito eficiente. Se a preocupação for segurança, ainda daria para implementar sem os recursos avançados Turing-completos. Concordo com o comentário irmão que diz que isso é “só mais um formato JSON”. Parece que uma geração de desenvolvedores acostumada ao ambiente web ineficiente até esqueceu o próprio conceito de eficiência
Fico curioso sobre qual é o estado da arte hoje para geração de gráficos vetoriais animados. LLMs não desenham bem paths SVG com qualidade estética, e modelos de imagem baseados em diffusion ainda só suportam bitmap. Há grande demanda por um Illustrator com IA generativa acoplado ao After Effects, e espero que alguém tente algo realmente inovador
O problema do Rive, serviço concorrente, é que ele parece pouco intuitivo do ponto de vista artístico. Não dá para desenhar diretamente com ferramentas como caneta ou blob; é preciso seguir um fluxo de trabalho específico, normalmente importando SVG, e ele está longe da interface intuitiva que o Flash tinha. Claro que há recursos interessantes, mas não é um ambiente tão simples e natural quanto o Flash