Lottie: o que é, animações e como funciona em plataformas móveis

O que é Lottie e como funciona

Lottie é uma biblioteca de código aberto criada pela Airbnb em 2015 para renderizar animações vetoriais em tempo real. O desenvolvedor cria uma animação no Adobe After Effects, exporta-a através do plugin Bodymovin para JSON, e o Lottie reproduz esse JSON no dispositivo de destino, interpretando camadas, formas, transparência e curvas de animação.

Ao contrário de arquivos de vídeo ou GIF, o Lottie é independente de resolução — a animação é renderizada vetorialmente e parece idêntica em dispositivos com qualquer DPI. Uma animação JSON é em média 5 a 10 vezes menor que um GIF ou vídeo equivalente, o que é crítico para aplicativos móveis com largura de banda limitada.

De acordo com a Airbnb Engineering, a adoção do Lottie reduziu o tamanho das animações no aplicativo em 80% em comparação com sequências de vídeo Precomposed, mantendo 60 FPS em todos os dispositivos suportados. Hoje, o Lottie é suportado em iOS, Android, Flutter, React Native, Web (HTML Canvas e SVG) e plataformas desktop.

O desempenho do Lottie vem da renderização nativa: no iOS usa Core Animation com CALayer, no Android — seu próprio renderizador Canvas em C++ via JNI. Isso permite reproduzir animações complexas com dezenas de camadas sem queda de quadros mesmo em dispositivos de gama média. Ao contrário de soluções baseadas em WebView (GIF, APNG, vídeo), o Lottie não cria um processo separado para renderização e não consome memória extra para decodificação de quadros.

Use o Lottie para indicadores de carregamento, ícones com microinterações, ecrãs de onboarding e animações promocionais festivas onde a suavidade e o tamanho reduzido são importantes.

O ecossistema Lottie inclui players oficiais para oito plataformas, o editor LottieFiles para pré-visualização no navegador e um marketplace com milhares de animações prontas. O desenvolvedor pode descarregar um JSON, integrá-lo num projeto e ajustar cores e velocidade de acordo com o sistema de design sem abrir o After Effects. O LottieFiles também fornece um SDK para integração acelerada com a capacidade de carregar animações através de um link AIR, permitindo atualizar animações nos dispositivos sem publicar uma nova versão do aplicativo na App Store ou Google Play.

Formato JSON do Lottie e Bodymovin

O esquema JSON do Lottie é um padrão aberto para descrever animação vetorial, composto por três níveis: composição, camadas e formas. A composição contém metadados: tamanho da tela, taxa de quadros e duração.

Estrutura do JSON

O objeto JSON raiz contém o campo layers — uma matriz de camadas de animação. Cada camada pode ser uma Shape Layer, Image Layer, Text Layer ou PreComp Layer. Para cada camada são definidas propriedades de transformação: posição, escala, rotação e opacidade vinculadas a quadros-chave.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Os quadros-chave (Keyframes) são definidos como matrizes com marcas de tempo, valores e curvas Bezier para interpolação. O Bodymovin converte automaticamente as curvas do After Effects para um formato compatível com Lottie, preservando o timing e as funções de easing com precisão de quadro.

Bodymovin — plugin de exportação

Bodymovin é uma extensão do Adobe After Effects que exporta uma composição para um arquivo JSON Lottie. O plugin suporta a maioria dos recursos do After Effects: formas, máscaras, efeitos, camadas de texto e tracking. Limitações aplicam-se a camadas 3D e alguns plugins — eles não são exportados e exigem simplificar a animação para 2D.

Integração do Lottie no iOS

No iOS, o Lottie é integrado via Swift Package Manager, CocoaPods ou Carthage. As classes principais são LottieView para SwiftUI e LottieAnimationView para UIKit. O pacote lottie-ios inclui suporte para animações do bundle, rede e objetos Data.

LottieView no SwiftUI

LottieView é um componente View para SwiftUI que aceita um nome de arquivo JSON do bundle ou uma URL para carregamento da rede. A animação é reproduzida automaticamente na velocidade e número de repetições especificados.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

Para UIKit, LottieAnimationView é usado, configurável via Interface Builder ou programaticamente. A View suporta todos os estados de animação: play, pause, stop, bem como uma barra de progresso para carregamento de dados. LottieAnimationView pode ser incorporada em UITableViewCell ou UICollectionViewCell para ícones animados em listas — ao scroll, a animação pausa e quando a célula aparece no ecrã, retoma, economizando recursos de CPU e GPU.

O desenvolvimento iOS moderno usa ativamente o Lottie com SwiftUI para criar ecrãs de onboarding animados e elementos interativos: ao scroll, o progresso da animação sincroniza com a posição do scroll através do ScrollViewReader. Isso cria um efeito de paralaxe onde a animação segue continuamente o movimento do dedo do utilizador, aumentando o envolvimento sem usar arquivos de vídeo pesados.

Controlo de reprodução

O player Lottie no iOS fornece uma API para reprodução de um quadro específico para outro, alterar cores de preenchimento/traço através de KeyPaths e ouvir eventos através de LottieAnimationDelegate. Pode pausar a animação durante o scroll e retomar quando parar para otimizar o desempenho.

Integração do Lottie no Android

No Android, o Lottie é adicionado através da dependência Gradle com.airbnb.android:lottie. O componente principal é LottieAnimationView, que pode ser colocado no layout XML como uma View normal e configurado através de atributos ou programaticamente.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

No layout XML, LottieAnimationView é configurado através de atributos: lottie_rawRes (referência ao JSON em res/raw), lottie_autoPlay, lottie_loop. O carregamento da rede é suportado via lottie_url ou programaticamente através de setAnimationFromUrl. A versão Android do Lottie usa seu próprio renderizador Canvas, independente de aceleração de hardware.

Carregamento de RawRes e rede

Para animações estáticas, o JSON é colocado em res/raw e referenciado via RawRes. Para animações dinâmicas, o Lottie carrega JSON de uma URL ou objeto Data com um callback de progresso mostrando a percentagem de download. O cache Lottie guarda automaticamente as animações carregadas em memória para evitar novo download em renderizações subsequentes.

O Lottie para Android suporta animação em RecyclerView através de LottieAnimationView incorporada diretamente nos itens da lista. Para otimização de desempenho, recomenda-se usar setAnimation com carregamento diferido e desativar a animação para elementos fora do ecrã através do callback RecyclerView.OnChildAttachStateChangeListener. Isso evita quedas de FPS ao scrollar listas longas com ícones animados.

Personalização e controle de animações Lottie

Lottie fornece uma API poderosa para personalizar animações prontas sem modificar o arquivo original do After Effects. Isso permite adaptar uma mesma animação a diferentes temas, cores e tamanhos de aplicação.

Alteração de cor via KeyPath

As cores de preenchimento e traço podem ser alteradas em tempo de execução via KeyPath — um caminho de string para um elemento da animação. Por exemplo, para alterar a cor de um ícone de carrinho de vermelho para azul, basta encontrar seu KeyPath e aplicar o novo valor. Isso elimina a necessidade de armazenar múltiplas versões da mesma animação para diferentes esquemas de cores.

Controlo de velocidade e progresso

Cada animação Lottie pode ser controlada por velocidade (animationSpeed), progresso (setProgress) e intervalo de quadros (play(fromFrame:toFrame:)). O modo de progresso permite sincronizar a animação com um gesto de scroll: quanto mais o ecrã é scrollado, mais avançada está a animação — uma técnica popular para onboarding e efeitos de paralaxe.