Lottie Compose : criando animações em apps modernos.

O lottie é uma lib muito conhecida por prover animações para várias plataformas, tanto mobile quanto web.

Com a popularização do compose no mundo Android nativo, o Lottie também ficou compatível com essa tecnologia, abaixo vou mostrar como é simples o seu uso.

Nesse tutorial irei mostrar uma animação de loading de tela com um arquivo de json, geralmente uso o lottiefiles para procurar animações compatíveis com lottie:

Não esqueça de salvar ele como JSON para funcionar com esse tutorial:

Para simplificar as coisas eu criei um novo projeto com uma tela padrão compose no Android Studio:

Setup do lottie compose no gradle:

dependencies // outras dependencias
 implementation "com.airbnb.android:lottie-compose:4.1.0"
}

Importando o json para o projeto:

Após isso já posso utilizar ele na minha tela com o seguinte código:

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

Essa função composable eu já posso chamar na minha tela e tenho esse resultado:

Simples né? Até a próxima.

Minhas redes sociais: linkedin ou twitter.

Originally published at https://medium.com on March 17, 2022.