Lottie Files — A simbiose entre o designer e o desenvolvedor (Parte 1)
Lottie Files é um formato de arquivo de animação baseado em JSON (Json based Animation), ele habilita os designers a disponibilizarem seus trabalhos, sejam animações ou imagens estáticas para qualquer plataforma com bastante facilidade.
A ideia é que os desenvolvedores recebam os arquivos no formato JSON que os possibilita utilizar essas animações ou imagens estáticas em seus aplicativos.
O problema apresentado
Observem que no título deste artigo utilizamos a palavra simbiose, segundo Lynn Margulis: “A simbiose pode ser definida como uma associação a longo prazo entre dois organismos de espécies diferentes e geralmente essa relação é benéfica para ambos os indivíduos ou não”.
Podemos então chegar ao entendimento que é um grande desafio integrar o trabalho do designer e do desenvolvedor, mas especificamente, o desenvolvedor Front End. O Lottie Files vem fazer com que essa simbiose aconteça com mais facilidade e flexibilidade.
Um pouco de história
Para entender melhor vamos contar um pouquinho da história da animação no contexto das plataformas web.
Voltando no tempo, as primeiras animações nos primórdios da internet eram baseadas nos arquivos em gif, logo depois, com o advento do Flash elas ganharam um ar mais profissional e o designer começou a ganhar um grande espaço. As páginas web começaram a ganhar mais funcionalidades e começaram a embutir em sua apresentação regras de negócio que exigiam a necessidade de interagir conforme a lógica ali apresentada.
Embutir essa animação em uma página web era bem simples, mas se houvesse a necessidade de fazer uma interação com essa lógica surgiria então uma série de problemas:
- A interoperabilidade entre as tecnologias.
- A separação e lacuna entre o trabalho do designer e do desenvolvedor.
- A velocidade de carregamento das páginas ou aplicativos.
- A falta de um padrão que não fosse proprietário.
A interoperabilidade entre as tecnologias
Dos padrões que tínhamos disponíveis, o GIF era muito simples e com pouca qualidade e o Flash era mais profissional. Com ele era possível fazer lindas animações e até jogos, com o carregamento lento, se utilizava de um formato proprietário que era comumente alvo de críticas na questão da segurança. Outro grande problema é que ele dependia de um plugin, chamado de Flash player, que não foi bem aceito por algumas empresas, principalmente pela Apple, o que mais tarde acabou causando o fracasso do plugin e o triunfo do HTML5.
A separação e lacuna entre designer e desenvolvedor
O designer e o desenvolvedor pouco se falavam, o designer criava a animação, enviava para o desenvolvedor que apenas embutia a mesma em uma página web. No entanto, com o crescimento e evolução da web esse paradigma foi quebrado. A transformação de páginas, antes estáticas, agora tinham uma necessidade latente de ganharem funções dinâmicas e se comportarem mais como aplicativos. Essa tendência cresceu impulsionada pela necessidade que as empresas tinham de alimentar os seus sistemas tradicionais de TI , direcionando suas políticas de marketing.
Essa mudança forçou uma aproximação maior que combinasse o talento do designer para criar movimento e o desenvolvedor de aplicativos ou de sites que precisava embutir regras de negócio em sua aplicação. No entanto, os passos para se chegar em um resultado razoável eram custosos, fazendo com que muitos desistissem ou implementassem projetos que não eram concluídos e ficavam pela metade.
A velocidade de carregamento dos aplicativos e sua segurança
O desempenho sempre foi primordial para web, a banda larga, que hoje é uma realidade para grande parte da população mundial, no passado era quase inexistente e as animações em Flash se tornaram um terror no quesito tempo de carregamento e segurança.
Depois que o Flash foi abandonado as animações começaram a ser apresentadas pelo designer e construídas pelo desenvolvedor, passo a passo, quadro a quadro, pouco a pouco. O designer exportava imagem por imagem para que o desenvolvedor através do código desse vida aquela animação embutindo a regra de negócio necessária. Podemos dizer que o trabalho era de formiguinha e o nosso mundo de frequentes mudanças sempre quer tudo cada vez mais rápido. O fato é que o dinheiro nunca dorme e também não gosta de esperar.
Falta de um padrão que não fosse proprietário
As animações sempre foram um tema que despertou muita atenção, por isso, manter um padrão que fosse propriedade de apenas uma empresa acabou se tornando um problema. Depois do abandono do Flash, o HTML5 assumiu a direção desse fluxo, mas era notório que ainda faltava algo que pudesse trazer ganho de produtividade e se encaixasse na cultura de desenvolvimento com equipes utilizando ferramentas e processos ágeis. Pensando nisso, em 2015, um grupo de engenheiros que trabalhava na empresa Airbnb concebeu a ideia de exportar a animação para o formato JSON, que se tornou extremamente popular, aberto e amplamente utilizado e cada vez mais conhecido.
Lottie files, apoio e características
Para essas animações que eram exportadas em formato JSON deram nome de Lottie Files. Entre 2018 e 2019, o apoio e investimento chega por parte da Microsoft e da Samsung. Em 2020, é criado um arquivo específico com formato .lottie com o intuito de poder agregar várias animações em um arquivo.
Porém, pode-se dizer que o grande marco e diferencial do Lottie Files foi sem dúvidas a criação de um marketplace onde o designer pode se cadastrar, fazer suas animações, colocar à venda ou disponibilizar gratuitamente. Essa grande mudança popularizou o lottie como formato e ajudou programadores deixando os aplicativos com visual mais rico, mesmo que o desenvolvedor não conheça as ferramentas de animação.
É importante ressaltar que o site fornece também material de apoio como tutoriais e um blog com notícias e artigos sobre o assunto. E com todo esse apoio veio também o amadurecimento da tecnologia, empresas detentoras de ferramentas como Figma, After Effects, Animator e entre outras, integraram-se ao Lottie em seus principais aplicativos. Diversas linguagens de programação já incluíram em seus pacotes ferramentas ou plugins permitindo que o ecossistema do Lottie venha crescendo e ganhando cada vez mais adeptos. Como exemplos temos abaixo:
As vantagens sobre outros formatos como o PNG e o SVG
Sobre esse assunto podemos destacar uma tabela comparativa fornecida pela documentação do Lottie que compara suas características com os formatos SVG e PNG e está disponível no endereço https://lottiefiles.com/blog/engineering/difference-png-svg-lottie e que destacamos a seguir:
Considerações finais
Adotar o Lottie Files não é a única solução para tudo, todavia, desponta como um forte candidato a ser cada vez mais popular e cada vez mais evoluir e se firmar como uma poderosa opção. Quando falamos de grandes projetos sua flexibilidade para mudanças e customizações é um fator preponderante para essa escolha. Tirem suas próprias conclusões, as cartas do jogo estão na mesa.
Referências
https://lottiefiles.com/blog/inspiration/the-flash-back-remembering-adobe-flash
https://lottiefiles.com/blog/inspiration/power-of-interactive-content
https://lottiefiles.com/blog/engineering/difference-png-svg-lottie
https://iteo.medium.com/microinteraction-a-small-but-essential-design-element-a6d6c3db27d8
