Lottie — o que é, animação vetorial em aplicativos móveis

O que é Lottie?

Lottie — uma biblioteca multiplataforma para reproduzir animação vetorial, desenvolvida na Airbnb em 2015. Ela resolve o problema de arquivos de vídeo pesados e folhas de sprite rasterizadas: um designer cria animação no After Effects, exporta via Bodymovin para JSON, e um desenvolvedor incorpora este arquivo em um aplicativo móvel. Lottie renderiza animação programaticamente via Canvas, Core Animation ou Skia, dependendo da plataforma.

A principal vantagem do Lottie — a animação vetorial escala sem perda de qualidade em qualquer tela: do Apple Watch a TVs 4K. O tamanho do arquivo JSON de animação é tipicamente de 5 a 50 KB, dezenas de vezes menor que o arquivo de vídeo equivalente. De acordo com a Airbnb Engineering (2025), Lottie suporta mais de 80% dos recursos do Adobe After Effects, incluindo máscaras, efeitos, curvas e expressões.

Bodymovin — é um plugin para After Effects (gratuito, GitHub) que serializa uma composição no formato JSON compreendido pelo runtime do Lottie. Suporta After Effects CC 2018 e versões posteriores. Para animações complexas com muitos quadros-chave, o dotLottie é recomendado — um formato baseado em Lottie JSON, mas compactado e empacotado em um único arquivo.

Arquitetura Lottie: como a renderização funciona

Lottie usa uma arquitetura de renderização em camadas que se adapta às capacidades da plataforma. No Android, a animação é desenhada através da API Canvas — o próprio renderizador do Lottie (LottieDrawable), que não usa animações do sistema. No iOS, Lottie depende do Core Animation Layers, proporcionando alto desempenho e 60 FPS. No Flutter, Lottie usa Skia Canvas através do CustomPainter.

A renderização passa por três estágios: análise JSON — interpretação da animação em LottieComposition (todas as camadas, formas, quadros-chave); interpolação — cálculo de valores intermediários entre quadros-chave considerando curvas de easing; desenho — renderização do quadro atual no Canvas ou via Core Animation. Lottie suporta aceleração de hardware: no Android — aceleração via Canvas com Hardware Accelerator, no iOS — CALayer com aceleração GPU integrada do Core Animation.

Usando Lottie no Android (Kotlin)

No Android, LottieAnimationView estende AppCompatImageView e cuida de todo o ciclo de carregamento e renderização. O arquivo JSON é colocado na pasta res/raw ou assets. LottieAnimationView suporta controle de reprodução — play, pause, resume, setFrame, setProgress, repeat, speed — e escuta via AnimatorUpdateListener e AnimatorListener.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// Configuração programática do LottieAnimationView
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// Carregamento de assets e armazenamento em cache
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — desenho personalizado sem View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Melhores práticas Android: use setCacheStrategy(CacheStrategy.Strong) para animações que se repetem com frequência — a composição é armazenada em cache na memória, e cada nova instância não analisa JSON novamente. Para listas (RecyclerView), use LottieAnimationView com enableMergePathsForKitKatAndAbove(true) e disableExtraScaleModeForOlderWorkarounds() para otimizar a renderização. Para animações com fundo transparente, defina android:layerType="hardware" para aceleração GPU.

Usando Lottie no iOS (Swift)

No iOS, AnimationView é a classe principal do Lottie para UIKit e SwiftUI. Ela é adicionada via Swift Package Manager ou CocoaPods. Os arquivos JSON são adicionados ao bundle do projeto. AnimationView determina automaticamente a escala (densidade lógica da tela) e usa Core Animation para renderizar camadas a 60 FPS.

import Lottie

// UIKit: AnimationView com controle manual
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: animação com progresso (para vinculação a eventos)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView como UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// Uso no SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Melhores práticas iOS: para animações que iniciam imediatamente após o carregamento, use animationView.play(fromProgress: 0, toProgress: 1) com loopMode = .playOnce para efeitos de destaque únicos. Para Lottie em UITableView/UICollectionView, use AnimationView com um arquivo de animação em cache via LottieAnimation.cached. Renderizar um grande número de camadas (50+) pode causar quedas de FPS — nesses casos, ative renderingEngine = .mainThread (padrão) ou .coreAnimation para macOS.

Lottie vs vídeo: comparação de formatos de animação

Lottie difere fundamentalmente de arquivos de vídeo: ele não armazena pixels, mas descreve formas vetoriais, suas transformações e curvas de mudança ao longo do tempo. Vídeo (MP4, WebM) é uma sequência de quadros rasterizados em resolução fixa. A diferença se manifesta no tamanho do arquivo, qualidade de escala, interatividade e desempenho.

Quando escolher Lottie: ícones de carregamento, animações de curtidas/reações, telas de onboarding, microanimações de destaque de botões. Para cenas complexas com efeitos 3D, iluminação realista ou personagens fotorrealistas, o vídeo continua sendo uma escolha mais prática. Lottie não foi projetado para reproduzir cenas longas (mais de 10 segundos) — a duração ideal de uma animação é de 2 a 5 segundos.

Otimização de desempenho do Lottie

O desempenho do Lottie depende do número de camadas, da complexidade das máscaras e efeitos, e do renderizador. Para manter 60 FPS em dispositivos de médio porte, siga estas recomendações: limite o número de camadas a 30–40 por cena, evite pré-composições aninhadas sobrepostas, use dotLottie para animações complexas.

// Otimização do Lottie para RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Armazenamento em cache da composição na memória
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool de LottieAnimationView para reutilização
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// Desativação de recursos desnecessários
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Limitação do número de quadros

Otimizações adicionais: ative enableMergePathsForKitKatAndAbove(true) para dispositivos com Android 4.4+ — isso mescla caminhos sobrepostos em um único caminho, reduzindo o número de chamadas de desenho. Use dotLottie em vez de JSON — o formato binário compacta a animação em 50–80% através da serialização protobuf, reduzindo o tempo de análise. Para animações em RecyclerView, defina repeatCount = 0 (reprodução única) e pare a animação ao rolar via recyclerView.addOnScrollListener. De acordo com o Airbnb Engineering Blog (2025), essas medidas reduzem a carga da CPU em até 40%.