Os problemas de desempenho do Lottie geralmente vêm do arquivo, não do player. After Effects facilita a adição de recursos que são caros para renderizar quadro a quadro em um telefone.
Comece com o arquivo. Máscaras e esteiras costumam ser o maior custo; substitua-os por formas mais simples sempre que possível. Remova efeitos e desfoques que o player não precisa. Mesclar formas, reduzir a contagem de camadas e pré-compor com cuidado. Imagens grandes incorporadas adicionam memória e custo de decodificação, portanto, otimize-as ou substitua-as por vetores. Um inspetor Lottie, como nosso visualizador gratuito Lottie JSON, ajuda você a ver o que está dentro de um arquivo.
Em seguida, verifique como o aplicativo o reproduz. As animações que ficam em loop quando estão fora da tela, dentro de uma guia fechada ou em uma célula da lista que rola para fora ainda usam CPU e bateria. Pause-os quando não estiverem visíveis e interrompa os loops desnecessários. Evite reproduzir dezenas de animações ao mesmo tempo.
Escolha as opções certas para sua plataforma. Na web, os renderizadores SVG e canvas têm desempenho diferente dependendo da animação, então teste ambos. O formato compactado .lottie (dotLottie) reduz o tamanho do download. No Android, teste com aceleração de hardware onde seu player for compatível.
Finalmente, meça em um dispositivo de baixo custo. Se uma animação ainda for muito pesada, pode ser a ferramenta errada para o trabalho: um simples CSS ou uma animação nativa pode substituir um loop decorativo, e componentes interativos podem ser melhor construídos em uma ferramenta baseada em estado, como Rive ou ExodeUI, que criamos.