O que é Lottie?
Lottie é um formato leve de animação que permite animações de alta qualidade e escaláveis no formato JSON. No Flowics, Lottie é particularmente útil por sua capacidade de renderizar animações dinamicamente com textos e fontes editáveis, proporcionando flexibilidade e personalização para gráficos interativos. Sua estrutura baseada em JSON garante integração perfeita e desempenho otimizado em comparação com animações tradicionais baseadas em vídeos ou imagens. Essas animações são exportadas do Adobe After Effects usando o plugin BodyMovin.
Exportando After Effects para Lottie
Para exportar uma animação do After Effects para um arquivo JSON Lottie, siga estas etapas:
Instale o Plugin BodyMovin:
Baixe e instale a extensão BodyMovin aqui.
2. Habilite o Acesso a Scripts:
No After Effects, navegue até Editar > Preferências > Scripts e Expressões.
Habilite a opção Permitir que Scripts Gravem Arquivos e Acessem a Rede.
3. Prepare a Animação para Exportação:
Abra seu projeto e certifique-se de que as camadas de texto permaneçam como texto (não convertidas em formas).
Evite caracteres especiais ou recursos não suportados, como camadas do Illustrator.
Não incorpore fontes ao exportar.
4. Exporte Usando BodyMovin:
Navegue até Janela > Extensões > BodyMovin.
Selecione sua composição e abra as configurações do plugin.
Desmarque a opção Glyphs para garantir que as camadas de texto permaneçam editáveis.
Para incorporar imagens rasterizadas, habilite Incluir no JSON na seção Assets.
5. Renderize e Salve:
Selecione a camada, clique nos três pontos e salve nos seus arquivos.
Clique no botão renderizar no BodyMovin para exportar a animação.
Após a renderização, clique em Concluído. Um arquivo JSON da animação será gerado.
6. Valide a Exportação:
Teste a animação exportada usando a página de visualização do LottieFiles e verifique problemas de compatibilidade com o verificador de suporte de recursos.
Problemas comuns incluem gradientes não suportados ou fontes ausentes. Por exemplo, gradientes podem ser renderizados como cores sólidas se configurados incorretamente, e fontes podem precisar ser carregadas manualmente.
Uma vez renderizadas, o Flowics processará as fontes, permitindo que os usuários façam upload e selecionem famílias de fontes através do Editor de Gráficos.
Importar Arquivos Lottie no Flowics
Faça o Upload na Biblioteca de Assets:
Acesse a Biblioteca de Assets no Editor de Gráficos e carregue seu arquivo JSON.
2. Adicione um Elemento Lottie:
Arraste um elemento Lottie para sua árvore gráfica e selecione o arquivo JSON carregado.
3. Modifique as Configurações da Animação:
Configure opções de reprodução, como loop, velocidade e reprodução reversa, através do painel de configurações.
Use a opção Subframes para uma reprodução mais suave.
4. Conteúdo Editável:
As animações Lottie com textos editáveis exibirão campos no Inspector.
Ajuste o texto dinamicamente durante a reprodução ou enquanto a animação estiver pausada.
Carregue fontes personalizadas, se necessário, e atribua-as na página de Fontes do Editor de Gráficos.
5. Controle Remoto:
Exponha campos de texto editáveis para controle remoto ativando a seção Conteúdo Editável no Inspector.
Limitações Conhecidas e Soluções de Problemas
Tipos de Arquivos Suportados:
Apenas arquivos .json são suportados. Arquivos .lottie não são compatíveis.
2. Incorporação de Imagens:
Imagens rasterizadas podem aumentar o tamanho do arquivo JSON. Ajuste as taxas de compressão, se necessário.
3. Gradientes e Caracteres Especiais:
Gradientes podem não ser exportados corretamente se criados com configurações não inglesas ou plugins específicos. Consulte o Guia de Exportação de Gradientes para soluções.
Evite usar caracteres especiais ou tipos de camadas não suportados.
4. Limitações de Fontes:
Apenas camadas de texto e fontes padrão são editáveis. Texto baseado em glifos não é suportado.
5. Compatibilidade de Camadas:
Para camadas do Illustrator, converta-as em formas antes de exportar para evitar perda de qualidade.
6. Problemas de Renderização no BodyMovin:
Certifique-se de que os scripts estejam habilitados nas preferências e reinicie o After Effects.