Maurélio ToscanoCom as ferramentas certas, exportar animações do After Effects em código JSON é mais fácil do que você imagina. Faz algum tempo que o Motion Design e a programação andam lado a lado. À medida que as ferramentas para essas indústrias se tornam mais dinâmicas e avançadas, surgem novos recursos que estão permitindo que Motion Designers comecem a ser uma figura importante dentro de um time de desenvolvimento de aplicativos, por exemplo. Fato que seria impossível alguns anos atrás.
Por isso, que tal nos aprofundar nesse espaço empolgante e dar uma olhada em algumas ferramentas que você precisará para começar a enviar projetos do After Effects para código?
Ferramentas para enviar projetos do After Effects para JSON Code
Ferramenta 1 – After Effects (é, claro!)
Por uma questão de obviedade, você precisará do After Effects instalado em seu computador. Indico a versão CC mais atual.
Ferramenta 2 – Lottie
A próxima ferramenta que precisamos é o Lottie, que usaremos para visualizar nossos arquivos.
(para saber mais sobre o Lottie, leia este artigo que compartilhamos há algum tempo – Lottie – ferramenta open-source para animações em apps)
Ferramenta 3 – Bodymovin
O Bodymovin está disponível no site aescripts. Ele exportará nossas animações como arquivos .json, transformando-as em um arquivo que reproduz nossa animação. Quando tivermos o Bodymovin instalado e nosso site / aplicativo de teste, podemos começar a explorar o que podemos fazer com ele.
O que exatamente é o JSON Code?
Se você quiser saber tecnicamente o que é JSON, significa JavaScript Object Notation. Aqui está uma amostra de como o arquivo é exportado. Ainda bem que não precisaremos editá-lo. Deus é mais.
No linguajar técnico: “Ao trocar dados entre um navegador e um servidor, os dados podem ser apenas texto. JSON é texto e podemos converter qualquer objeto JavaScript em JSON e enviar esse código para o servidor. Também podemos converter qualquer código JSON recebido do servidor em objetos JavaScript. Dessa forma, podemos trabalhar com os dados como objetos JavaScript, sem análises e traduções complicadas. ”
Se você deseja uma resposta não técnica, o JSON é um formato de arquivo que faz nossas animações serem reproduzidas sem a necessidade de renderizar um MOV além de mantém nossas animações escalonáveis e leves em tamanho para reprodução na web.
Qual importância de se trabalhar com arquivos JSON?
Você pode estar se perguntando, por que raios irei aprender isso? Pois, trabalhar com códigos é o mesmo que trabalhar com magia negra. No entanto, os resultados são maravilhosos.
Outro quesito é que este campo de trabalho vai continuar a crescer cada vez mais, pois aplicativos e sites precisam sempre inovar e se comunicar de forma criativa com seu público.
Veja este exemplo genial feito em JSON CODE pelo school of motiion
Esse fluxo de trabalho é incrivelmente diversificado e existem uma infinidade de usos para JSON.
Existe uma vasta gama de possibilidades. Desde uma logo em uma página da Web até animações complexas com personagens! Imagine o que você poderia fazer em uma página 404 ou até mesmo em uma simples página de contato em um site?
Acredite! Existe muito de potencial para alguns tipos de animações. Pequenos ícones, botões e transições, essas objetos nos quais podemos dar mais vida a aplicativos ou sites, e isso é apenas a ponta do iceberg. Usar o movimento para reforçar as emoções durante as interações com esses aplicativos e sites proporcionará uma experiência muito mais completa ao usuário.
Colaborar com um desenvolvedor pode levar a alguns resultados interessantes também. Pois, dessa forma, o Motion Designer poderá ficar 100% focado nas animações, deixando a parte burocrática dos códigos para quem entende mais a fundo.
Até os infográficos estão procurando maneiras de se tornarem animados. Entretanto, para gerar gifs com infográficos existem uma série de limitações como: tamanho de arquivo, 256 cores e duração muito pequena. Com o JSON, não há restrições quanto ao tamanho dos arquivos, ou seja, existem muito mais opções do que apenas exportar loops simples explorando soluções mais robustas e imersivas.
Desafios em se trabalhar em um workflow com JSON CODE
Há algumas peculiaridades para se acostumar no processo de trabalhar com essas ferramentas. Coisas como texturas e alguns efeitos não são utilizáveis ou podem deixar alguns aplicativos e sites muito pesados.
No momento da publicação deste artigo, sua animação precisará estar em uma composição e os elementos precisam ser shape layers.
Os arquivos do AI precisam ser convertidos ou serão exportados como imagens, para que fique mais leve. Como todos os objetos precisam ser shape layers, gerenciar sua estrutura de camadas é vital, dependendo do tamanho de um projeto no qual você está trabalhando.
Estas são apenas algumas das peculiaridades desse fluxo de trabalho, mas algumas experiências e colaboração ajudarão você a começar a desenvolver um processo que funcione para você e o que você espera alcançar trabalhando nesta área.
(Este artigo é uma tradução do original do School Of Motion: Exporting JSON Code in After Effects)