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.
- 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.
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.
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.
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:
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.
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.
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.
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.
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:
