Como criar uma animação LottieFiles no After Effects

LottieFiles criou um tipo de arquivo editável pós-renderizado rápido, escalável e é fácil para você se envolver e criar animações nesse formato. Usando os efeitos do Adobe After e alguns plugins, você pode fazer parte do mais novo tipo de arquivo: o Lottie.

O que é um Lottie?

Um Lottie, ou dotLottie, é um tipo de arquivo que está conquistando os desenvolvedores da web. Você pode ter feito animações para incluir em seus designs, sejam elas para mídias sociais, web design ou design de UX e UI. E você provavelmente salva suas animações como arquivos GIF, SVG ou PNG. Um arquivo Lottie é todas as partes boas desses tipos de arquivo, mas menor, mais rápido e mais fácil de editar após a renderização.

LottieFiles é um enorme banco de dados de animações pré-fabricadas salvas nos formatos Lottie ou JSON. Essas animações são renderizadas em tempo real, permitindo um envio mais rápido para seus projetos. Não há como esperar para baixar esses arquivos; eles aparecerão assim que a página for aberta.

Para saber mais sobre LottieFiles, confira nosso introdução ao Lottie.

Começando

Vamos criar uma Lottie usando Adobe After Effects, mas existem outros softwares que você pode usar para criar sua animação Lottie. Você pode usar o Adobe Animate com o plug-in LottieFiles para criar um Lottie. Você também pode converter uma animação no formato SVG em um Lottie se já tiver feito uma animação nesse formato.

O After Effects é a nossa melhor escolha, no entanto, dado que o LottieFiles foi criado originalmente para ser usado no After Effects. Vamos começar.

1. Crie sua animação

O aspecto animador do seu Lottie é o mesmo de qualquer outro formato. Criamos a ilustração da nossa animação usando o Adobe Illustrator. Isso mantém as camadas separadas e prontas para serem importadas para o After Effects. Depois que sua ilustração for importada, você poderá adaptar as camadas da sua composição para a animação final.

As animações de loteria são executadas em um loop contínuo, então considere isso para os pontos final e inicial do seu design. A animação deve ser simples e ter cerca de três segundos de duração.

2. Baixe os Plugins

Existem dois plugins que você pode usar para criar um arquivo Lottie: o plugin LottieFiles ou o plugin Bodymovin. Ambos estão disponíveis para After Effects, mas o plugin LottieFiles também pode ser encontrado em outros softwares. Cada um deles faz coisas ligeiramente diferentes, mas vamos nos concentrar no plugin LottieFiles agora.

Para baixar o plugin LottieFiles, vá para o Página do plugin LottieFiles After Effects. Você encontrará duas opções de download.

A opção à direita requer um Gerente de extensão da Anastasiy que funciona com Mac e Windows. Depois de baixar o Extension Manager, baixe o plugin ZXP na página LottieFiles.

Após o download do plugin ZXP, abra o Anastasiy Extension Manager, clique em Depois dos efeitos, selecione o plug-in LottieFiles na lista e pressione Instalar.

De volta à página do plug-in LottieFiles, baixe também o plug-in do Adobe Exchange; abra seu aplicativo de desktop Creative Cloud e instale o plug-in. Retorne ao seu acabado animação no After Effects.

Algumas pessoas têm um erro de permissão ao usar esses plugins. Para evitar esse problema, acesse Depois dos efeitos > Preferências > Scripts e expressões > Script de aplicativo e marque a caixa para Permitir que scripts gravem arquivos e acessem a rede.

Feito isso, o pop-up para LottieFiles solicitará que você faça login. Se você ainda não tem uma conta LottieFiles, agora é a hora de criar uma.

3. Exporte sua loteria

Com os plugins LottieFiles instalados, você pode renderizar sua animação Lottie. Enquanto estiver na composição de animação finalizada, clique em Janela > Extensões > Arquivos Lottie. Isso abrirá um pop-up com os nomes de suas composições. Clique no seta verde ao lado do nome da sua composição, isso abrirá a janela de renderização do Lottie.

Após alguns segundos, sua animação aparecerá na janela pop-up. A animação será reproduzida em tempo real em loop. Aqui, você pode optar por salvar sua animação ou enviar sua animação para a biblioteca LottieFiles.

Clicando Salvar como lhe dará duas opções de exportação: Lottie JSON (*.json) ou dotLottie (*.lottie). O arquivo dotLottie é um arquivo compactado que inclui metadados, que não precisamos para exportar. Nós fomos com Lottie JSON.

Seu arquivo exportado será um arquivo de texto, não um arquivo de animação visual; é assim que os arquivos JSON funcionam. Mas e se você quisesse que a animação estivesse pronta? Vamos ver como você pode acessá-lo.

Como você pode usar sua animação Lottie

Para carregar seu Lottie para a biblioteca LottieFiles, clique em Carregar. Isso será renderizado por alguns segundos. Em seguida, clique no botão com o globo. Isso abre o site LottieFiles, onde você pode enviar sua animação Lottie para a biblioteca LottieFiles. Dê um nome ao seu arquivo e clique em Não interferir.

Depois que sua animação for aprovada na biblioteca LottieFiles, você poderá usar o plug-in LottieFiles em softwares como Adobe XD, Figma ou Sketch para enviar sua animação ao seu design.

Existem outras maneiras de usar sua animação LottieFiles além de diretamente na biblioteca de plugins. Você pode editar ainda mais sua animação Lottie na janela do navegador. Oferece um painel de camadas básicas; você pode alterar a cor de fundo, a velocidade de reprodução, a taxa de quadros e mais algumas coisas.

Na janela Handoff, você pode baixar sua animação como um Arquivo JSON para implementação em desenvolvimento web e design, ou você pode convertê-lo em um GIF para usos mais convencionais. Você também pode incorporar sua animação com um código de incorporação HTML, e também há opções para iOS e Android, para que você possa enviar a animação para o seu web design.

A incorporação do Lottie HTML permite que você edite o código para editar sua animação. Você pode alterar cores e tamanhos diretamente no código ao adicioná-lo ao seu site.

O download do aplicativo LottieFiles em seu telefone permite que você escaneie o código QR da animação para visualizar a animação no aplicativo. Você também pode usar o teclado LottieFiles e soltar seu dotLottie como um comentário em determinadas postagens.

Crie uma loteria no After Effects

Embora ainda possa parecer um tipo de arquivo não convencional, já que você não pode simplesmente enviar sua animação diretamente para a mídia social, como você pode com um GIF ou PNG, o Lottie vem com muitos benefícios para desenvolvedores web e designers que usam plugins ou códigos embutidos em seus desenhos.

Os arquivos Lottie e JSON economizam espaço e tempo de carregamento e preservam a qualidade em comparação com os tipos de arquivo tradicionais. LottieFiles cria constantemente novas formas de implementar os designs, as possibilidades são infinitas.

Como criar uma animação de movimento usando o Procreate

Criar uma animação em movimento no Procreate é fácil, e este artigo mostrará como fazê-lo.

Leia a seguir

Sobre o autor