O que é Lottie?

Lottie é um formato de arquivo de animação baseado em JSON que permite você enviar animações em qualquer plataforma com a mesma facilidade com que envia ativos estáticos. São pequenos arquivos que funcionam em qualquer dispositivo e podem ser ampliados ou reduzidos sem pixelização. Com o LottieFiles você cria, edita, testa, trabalha e envia um Lottie da maneira mais fácil possível.

Por que o Lottie?

Aqui estão algumas vantagens que o Lottie tem sobre os outros formatos de arquivo de animação existentes.

Tamanho de arquivo pequeno

As animações em Lottie são muito menores, porém mantém a mesma qualidade dos outros formatos, como GIF ou MP4.

Infinitamente escalável

As animações com Lottie são baseadas em vetores, o que significa que você pode ampliá-las e reduzi-las sem preocupar-se com a resolução.

Suporte multiplataforma e bibliotecas

Para todos os desenvolvedores, as transferências de Lottie são super fáceis. Você pode usar as animações em Lottie no iOS, Android, web e React Native sem modificações.

Interatividade

Nas animações Lottie, os elementos de animação são expostos para que você possa manipulá-los para serem interativos e responder a interações como rolar, clicar e passar o mouse. Saiba mais no Guia de Interatividade.

O mundo usa o Lottie

O Lottie é usado por mais de mil empresas em todo o mundo e em muitas das ferramentas que você usa todos os dias.

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Landing Page with Lottie Animation
Apple Logo
Apple Logo

Páginas de destino

Páginas de destino

Páginas de destino

Duolingo with Lottie Animation
Duolingo with Lottie Animation
Duolingo Logo
Duolingo Logo

Adicione satisfação às experiências digitais

Adicione satisfação às experiências digitais

Adicione satisfação às experiências digitais

Telegram Stickers with Lottie Animation
Telegram Stickers with Lottie Animation
Telegram Logo
Telegram Logo

Adesivos animados em mensagens

Adesivos animados em mensagens

Adesivos animados em mensagens

Samsung Watch with Lottie Animation
Samsung Watch with Lottie Animation
Samsung Logo
Samsung Logo

Animações do sistema para relógios inteligentes, TV e eletrodomésticos

Animações do sistema para relógios inteligentes, TV e eletrodomésticos

Animações do sistema para relógios inteligentes, TV e eletrodomésticos

Interactive Infographics with Lottie Animation
Interactive Infographics with Lottie Animation
The Guardian Logo
The Guardian Logo

Infográficos interativos

Infográficos interativos

Infográficos interativos

Product Walkthroughs with Lottie Animation
Product Walkthroughs with Lottie Animation
Google Logo
Google Logo

Passo a passo do produto

Passo a passo do produto

Passo a passo do produto

O Motion é o futuro do design

…e o LottieFiles torna isso mais fácil.

Como começar a usar o Lottie

Ferramentas e recursos para ajudá-lo a começar a usar o Lottie.

PASSO 1

Encontre ou crie um Lottie

Encontre uma animação em Lottie

Pesquise nossa biblioteca de animações gratuitas prontas para uso.

Em seguida, personalize qualquer Lottie com sua marca ou cores preferidas usando a ferramenta Color Palette ou o Lottie Editor.

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

Ou crie um Lottie do zero

Se você tiver habilidades de animação, crie um Lottie com nossos plug-ins do Adobe. Ou então, use um SVG e aplique algumas predefinições a ele com nosso conversor de SVG para Lottie.

PASSO 2

Use seu Lottie

O Lottie também tem suporte nativo em muitas outras ferramentas

Various company logos
Various company logos
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles

Está pronto para começar a usar o LottieFiles?

A história do Lottie

A história do Lottie

A história do Lottie

A história do Lottie

Stylized pixellated flower
Stylized pixellated flower
Stylized pixellated flower

2010

Antes do Lottie, os motion designers criavam suas animações e as repassavam aos desenvolvedores de software para implementação. As opções de implementação eram limitadas. Os desenvolvedores exportavam animações em formatos de baixa qualidade ou tentavam do zero reconstruir a animação no código. Esse procedimento não era eficiente e muitas vezes resultava em animações abaixo do ideal e que pareciam distantes da intenção do motion designer.

2015

2015

Hernan Torrisi tem a ideia de exportar a representação de uma animação no Adobe After Effects e renderizar a animação em tempo de execução. Ele aproveita as habilidades de script do After Effects para enumerar um projeto de animação e lança um plug-in para o After Effects chamado Bodymovin, que exporta a descrição do formato JSON de uma animação. Ele também lança o primeiro renderizador para o formato com um reprodutor baseado em JavaScript para navegadores.

JSON file
JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out
Pencil with Lottie written out

2017

Os engenheiros Brandon Withrow, Gabriel Peal e Leland Richardson, do Airbnb, veem o potencial das animações baseadas em JSON e os problemas que elas resolvem. Eles fazem parceria com Salih Adbul-Karim, o principal animador do Airbnb, para ajudar a criar bibliotecas iOS e Android que possam renderizar esses arquivos de animação JSON, que eles chamam de “Lottie”.

Rocketship with LottieFiles logo
Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

O LottieFiles é lançado!

O LottieFiles é lançado, dando aos animadores e desenvolvedores um lugar para testar instantaneamente, compartilhar e mostrar on-line suas animações.

2018

2018

A Microsoft e a .Net Foundation lançam uma biblioteca para renderizar o Lottie no Windows.

Window with flowerpot
Window with flowerpot
Window with flowerpot
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it

2019

O Qt adiciona suporte para o Lottie adicionando uma API QML para renderizar Lotties. A Samsung lança o rLottie, um renderizador baseado em C++ independente de plataforma para Lottie, e adiciona suporte ao Lottie no Tizen.

2020

2020

É criado o dotLottie. O dotLottie é um formato de arquivo de código aberto que agrega uma ou mais animações Lottie e seus recursos associados em um único arquivo. Esta será a próxima geração de Lottie para o futuro da animação.

Lottie illustration
Lottie illustration
Lottie illustration

Perguntas frequentes

Perguntas frequentes

O que é uma animação em Lottie?

Lottie é um formato de arquivo de animação baseado em JSON que permite você enviar animações em qualquer plataforma com a mesma facilidade com que envia ativos estáticos. São pequenos arquivos que funcionam em qualquer dispositivo e podem ser ampliados ou reduzidos sem pixelização.

O que é uma animação em Lottie?

Lottie é um formato de arquivo de animação baseado em JSON que permite você enviar animações em qualquer plataforma com a mesma facilidade com que envia ativos estáticos. São pequenos arquivos que funcionam em qualquer dispositivo e podem ser ampliados ou reduzidos sem pixelização.

O que é uma animação em Lottie?

Lottie é um formato de arquivo de animação baseado em JSON que permite você enviar animações em qualquer plataforma com a mesma facilidade com que envia ativos estáticos. São pequenos arquivos que funcionam em qualquer dispositivo e podem ser ampliados ou reduzidos sem pixelização.

O que é uma animação em Lottie?

Lottie é um formato de arquivo de animação baseado em JSON que permite você enviar animações em qualquer plataforma com a mesma facilidade com que envia ativos estáticos. São pequenos arquivos que funcionam em qualquer dispositivo e podem ser ampliados ou reduzidos sem pixelização.

Lottie é melhor que SVG?

Lottie é melhor que SVG?

Lottie é melhor que SVG?

Lottie é melhor que SVG?

Lottie é melhor que GIF?

Lottie é melhor que GIF?

Lottie é melhor que GIF?

Lottie é melhor que GIF?

Como usar o Lottie?

Como usar o Lottie?

Como usar o Lottie?

Como usar o Lottie?

Como criar em Lottie?

Como criar em Lottie?

Como criar em Lottie?

Como criar em Lottie?

Por que devo usar Lottie?

Por que devo usar Lottie?

Por que devo usar Lottie?

Por que devo usar Lottie?

Quem pode usar o LottieFiles?

Quem pode usar o LottieFiles?

Quem pode usar o LottieFiles?

Quem pode usar o LottieFiles?

Onde posso aprender mais sobre as animações em Lottie?

Onde posso aprender mais sobre as animações em Lottie?

Onde posso aprender mais sobre as animações em Lottie?

Onde posso aprender mais sobre as animações em Lottie?

Como eu edito as animações em Lottie?

Como eu edito as animações em Lottie?

Como eu edito as animações em Lottie?

Como eu edito as animações em Lottie?

O Motion é o futuro do design

O Motion é o futuro do design

…e o LottieFiles torna isso mais fácil.

…e o LottieFiles torna isso mais fácil.

Páginas de destino

Adicione satisfação às experiências digitais

Adesivos animados em mensagens

Animações do sistema para relógios inteligentes, TV e eletrodomésticos

Conheça outros criadores, designers e desenvolvedores que usam Lottie.

Passo a passo do produto

Crie. Trabalhe. Envie.

Traga o movimento para seus designs cotidianos sem esforço.

Crie. Trabalhe. Envie.

Traga o movimento para seus designs cotidianos sem esforço.

Crie. Trabalhe. Envie.

Traga o movimento para seus designs cotidianos sem esforço.

Crie. Trabalhe. Envie.

Traga o movimento para seus designs cotidianos sem esforço.