Reprodutor, editor de cor e otimizador de Lottie, tudo local
Abra animações .lottie, .tgs e .json, recolora cada preenchimento, contorno e parada de gradiente, veja o que vai quebrar noutros reprodutores e exporte para JSON, SVG, PNG, sequência de fotogramas ou WebM — tudo dentro do seu navegador.
Abre uma animação para veres a sua estrutura.
Como funciona
Solta o ficheiro
Um .json simples, um arquivo .lottie, um sticker .tgs do Telegram ou um .json.gz comprimido. Não se envia nada para lado nenhum.
Lê o relatório
Antes de renderizar seja o que for, tens o tamanho, o número de camadas e a lista do que vai quebrar em iOS, Android ou reprodutores antigos.
Recolora e corta
Cada preenchimento, contorno, parada de gradiente e fotograma-chave de cor vira uma amostra. Oculta camadas, corta o intervalo, força os fps.
Exporta ou continua
JSON, .lottie, SVG, PNG, uma sequência numerada de fotogramas ou um vídeo WebM; ou envia o resultado direto para outra ferramenta da suíte.
Nada sai da tua máquina
O reprodutor, o editor de cor, o otimizador e todas as exportações correm no teu próprio processador. Sem envios, sem conta, sem fila — e continua a funcionar com a rede desligada.
Cores que os outros visualizadores não veem
A maioria dos visualizadores online só encontra preenchimentos estáticos. Este também apanha contornos, paradas de gradiente, camadas sólidas e fotogramas-chave de cor animada, e diz-te quantas vezes cada cor é usada.
Uma árvore de camadas a sério
Cada camada de primeiro nível com o seu tipo, as suas expressões e as suas máscaras de faixa, mais um interruptor para ocultar as que não queres. Depois podem ser removidas do ficheiro exportado.
Um otimizador que mostra as contas
Arredondar as coordenadas que o exportador escreveu com quinze dígitos, tirar os metadados do autor e remover as camadas ocultas costuma reduzir o ficheiro a metade. Vês os bytes antes e depois, não uma promessa.
Exportação para imagem e vídeo
O fotograma atual em PNG ou SVG, todo o intervalo como sequência PNG numerada dentro de um ZIP, ou um vídeo WebM exato fotograma a fotograma. Tudo renderizado num canvas deste separador.
Um relatório de compatibilidade
Expressões, fusões de traçados, efeitos de camada, camadas de texto, marcas 3D e imagens referenciadas por URL: precisamente o que faz uma animação ficar bem aqui e mal num telemóvel.
Um reprodutor que renderiza, não uma pré-visualização transmitida
A animação é renderizada pelo lottie-web a correr nesta página, à cadência do próprio documento, com deslocamento exato ao fotograma e controlos a sério: avançar um a um, reproduzir ao contrário, cortar o intervalo, forçar os fps. Como o renderizador é local, não há espera de carregamento nem tecto de qualidade imposto por um serviço de pré-visualização.
Abre uma animação Lottie, vê exatamente o que tem lá dentro, muda-lhe as cores, tira-lhe o peso a mais e exporta-a no formato de que precisas mesmo, sem a enviar a ninguém.
O designer entrega-te um Lottie de 900 KB que parte no Android. Esta ferramenta diz-te porquê antes de publicares, deixa-te recolorá-lo para bater certo com a marca sem voltar ao After Effects, remove as camadas ocultas que o exportador deixou e devolve-te o ficheiro em JSON, .lottie, SVG, PNG, sequência de fotogramas ou WebM.
Tudo acontece neste separador. A ferramenta assinala ainda as animações que referenciam imagens por URL, porque esse é o único caso em que um Lottie não é autónomo, e incorpora-as por ti quando chegam dentro de um arquivo .lottie.
Perguntas frequentes
QAs minhas animações são enviadas para algum lado?+
Não. O ficheiro é lido com a File API do próprio navegador, processado em memória e renderizado por um reprodutor empacotado com esta página. Não há qualquer chamada a servidor em momento algum, e não fica nada guardado entre visitas.
QQue formatos posso abrir?+
Um .json de Lottie, um arquivo .lottie (o formato que o lottiefiles.com dá por omissão), um sticker .tgs do Telegram e um .json.gz comprimido. O contentor é detetado pelo conteúdo, por isso um ficheiro mal nomeado também abre.
QPorque é que não toca nada assim que solto o ficheiro?+
É de propósito. Soltar um ficheiro apenas o lê e inspeciona; primeiro tens o tamanho, a estrutura e o relatório de compatibilidade, e o reprodutor arranca quando carregas no botão. Se preferires saltar tudo isso, cola o JSON à mão e abre logo.
QQue cores dá mesmo para editar?+
Preenchimentos e contornos estáticos, cada parada de um gradiente de preenchimento ou de contorno, a cor de uma camada sólida e cada fotograma-chave de uma propriedade de cor animada. As cores cozidas dentro de um PNG incorporado ou geradas por um efeito de camada não se podem mudar: nenhum editor consegue sem redesenhar o recurso.
QQuanto é que o otimizador reduz um ficheiro?+
Depende inteiramente da origem, e por isso a ferramenta mostra os bytes reais antes e depois em vez de citar um número. Os ficheiros acabados de sair do After Effects costumam ficar 40-60 % mais pequenos com duas casas decimais, porque quase todo o seu peso são coordenadas escritas com quinze dígitos significativos.
QPosso exportar um GIF?+
Diretamente não, e é deliberado: um codificador de GIF no navegador iria posterizar as cores de uma animação vetorial. Exporta antes uma sequência PNG numerada ou um WebM — ambos mantêm a paleta completa, e qualquer codificador os transforma em GIF sem perdas.
QEditar as cores estraga a animação?+
Não. Cada edição fica guardada como um remendo sobre o documento original, que nunca é modificado. Podes anular, refazer, repor a paleta ou manter premido Comparar para veres o ficheiro intacto a qualquer momento.