Como editar animações Lottie gratuitamente no seu navegador, After Effects não é necessário

Aqui você aprenderá a facilmente personalize animações com o Lottie Editor gratuito baseado em navegador. Use-os em sites, aplicativos e muito mais.

O que é uma animação Lottie?

Uma animação Lottie é um arquivo JSON (JavaScript Object Notation), um formato padrão aberto que é facilmente legível por pessoas. Ele usa texto e armazena e transmite animações e outros dados.

Ele permite que você adicione animações escaláveis ​​de alta qualidade com tamanhos de arquivo muito pequenos em todas as plataformas. É tão fácil quanto adicionar objetos estáticos.

Lottie é gratuito e de código aberto. Você pode facilmente use-o em qualquer plataforma, incluindo páginas da web, de duas maneiras diferentes:
  • usando código gerado a partir de um arquivo Lottie importado que você criou ou personalizou
  • usando uma animação pré-fabricada

O que é o Lottie Editor?

Você pode fazer animações Lottie do zero ou ajustando modelos existentes no After Effects, mas e se você não tiver a habilidade de fazer isso? É aí que o Lottie Editor entra.

Você pode soltar um arquivo de animação Lottie direto no navegador e fazer alterações, antes de exportar sua animação novamente. É rápido e não poderia ser mais fácil.

Vamos dar uma olhada em como isso funciona.

Como personalizar as animações Lottie com o editor gratuito baseado em navegador

Abra o Lottie Editor e importe seu JSON

Ao abrir o Lottie Editor, você verá a opção de soltar seu arquivo JSON no navegador ou navegar até onde ele está salvo.

Crie uma animação Lottie usando o Editor Lottie.Crie uma animação Lottie usando o Editor Lottie.Crie uma animação Lottie usando o Editor Lottie.
Editora Lottie

Para demonstrar, estou usando ga-analytics#sendElementsClickEvent”>Ícones animados de educação on-line da Envato. Este download inclui uma versão JSON dos ícones animados.

Solte seu JSON arquivo no navegador.

A tela de edição

Coloquei o ícone ‘eBook’ do conjunto de ícones, que é representado por um tablet com escrita e um marcador de fita no topo. A animação é por meio da escrita e da fita, ambas aparecem e desaparecem.

Há três cores: azul para a tela, azul escuro no contorno e amarelo para o marcador.

Crie uma animação Lottie: a tela de edição.Crie uma animação Lottie: a tela de edição.Crie uma animação Lottie: a tela de edição.

Você pode ver minhas opções para personalizar o ícone, dispostas à direita do Editora LottieVamos começar com as preferências de animação.

Preferências de animação

As dimensões são diretas, é o tamanho que você quer que o ícone tenha. Lotties são escaláveis, então você pode torná-lo maior ou menor sem perder nada da qualidade ou definição.

Esteja ciente de que ele não ajustará automaticamente a dimensão restante com base na alteração da outra. Você precisa descobrir o tamanho certo para altura e comprimento.

Neste caso, é um quadrado simples. Posso editar as dimensões na mesma quantidade e elas permanecerão proporcionais: aqui elas foram alteradas para 1000×1000.

Edite suas preferências de animações gratuitas da Lottie.Edite suas preferências de animações gratuitas da Lottie.Edite suas preferências de animações gratuitas da Lottie.
Preferências de animação

Duração mudará automaticamente quando você alterar Taxa de quadros. Por exemplo, alterando o Taxa de quadros para 60 (de 30) será pela metade Duração. O dobro do FRmetade da duração.

Você pode então altere manualmente a duração para aumentá-la, mas você não fará realmente o seu animações Lottie grátis por mais tempo. YVocê só vai aumentar o comprimento de tudo e ficará assim:

Animação em branco no Editor Lottie.Animação em branco no Editor Lottie.Animação em branco no Editor Lottie.
Animação em branco

Mantendo 60 FPS, se você colocasse 100 para a duração, seu ícone animado duraria 2,5 segundos. Ele então desapareceria, e haveria espaço vazio para o tempo restante (7,5 segundos).

Ao fazer alterações, lembre-se de clicar Atualizar para vê-los.

Configurações de reprodução da sua animação Lottie gratuita.Configurações de reprodução da sua animação Lottie gratuita.Configurações de reprodução da sua animação Lottie gratuita.
Configurações de reprodução

Se você quiser aumentar o Velocidade de reproduçãouse a opção abaixo Configurações de reproduçãoclicando nele irá rolar através 1 para 2,5 x.

Cor de fundo em suas animações gratuitas da Lottie.Cor de fundo em suas animações gratuitas da Lottie.Cor de fundo em suas animações gratuitas da Lottie.
Cor de fundo

Você também pode alterar a cor de fundo aqui. Fazer isso pode ajudar a ver cores mais sutis, como o contorno do e-reader.

Embora ele permita que você insira manualmente um número hexadecimal, ele não será alterado; você só poderá escolher preto ou branco.

Mudar cores

Esta é provavelmente a opção mais útil para você: a capacidade de alterar a cor do ícone para combinar com sua marca ou design do site.

Quantas opções você vê aqui dependerá de quantas cores aparecem no ícone. Neste caso, são três, o azul escuro do contorno, um azul mais claro para a tela e amarelo para o marcador da faixa de opções.

Altere a cor do ícone na sua animação gratuita da Lottie.Altere a cor do ícone na sua animação gratuita da Lottie.Altere a cor do ícone na sua animação gratuita da Lottie.
Mudança de cor

Se você tiver os códigos hexadecimais para as cores que você usa, você pode colocá-los aqui. Se não, você pode escolher manualmente. Você precisará Atualizar após cada mudança de cor ou pode ficar um pouco instável e perder uma mudança.

Exportar

Quando estiver satisfeito com suas alterações, vá para Exportar Como Lottie JSON e clique no ícone de download.

Exporte seu arquivo no Editor Lottie.Exporte seu arquivo no Editor Lottie.Exporte seu arquivo no Editor Lottie.
Exportar

Pronto! Uma animação personalizada para usar onde você quiser.

Mais excelentes recursos de animação

Agora você sabe como criar uma animação gratuita de Lottie. Continue aprendendo sobre animações online com estes recursos:

[ad_2]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *