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.

--

--

--

Impulsionar pessoas para inovar o mundo

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
SOUTH SYSTEM

SOUTH SYSTEM

Impulsionar pessoas para inovar o mundo

More from Medium

March 5 Another day in the life of a black man in Germany.

Call for Entries: ‘Simulation’ | International Interior Design Hosted by UNI

Duluth Places: Hunters Park/UMD

TAKE AWAYS FROM VIDEO SIMPLE PRODUCTS MAKE BIG COMPANIES:-