Exploring LaunchedEffect and InfiniteTransition in Jetpack Compose

Animation with Jetpack Compose — Part 3

Photo by Clay Banks on Unsplash

Jetpack Compose is a revolutionary update for building an Android app UI. It leveraged the concept of declarative UI and brought the fun of building UI with Kotlin — a dream for many Android devs. If you’re new to Jetpack Compose, I recommend you go through the following articles:

• Jetpack Compose Components (Part 1)
• Build Android Layouts in Jetpack Compose

To learn more about animations in Jetpack Compose, please read the following article in this animations series:

• “Jetpack Compose — Animation Notes: 1” — Exploring AnimatedVisibility in Compose
• “Jetpack Compose — Animation Notes: 2” — Building Fab Menu with Compose AnimatedVisibility and Animatable
• “Jetpack Compose — Animation Notes: 3” — You’re here now

With that being said, let’s get started.

Introduction

What is the goal?

We’re trying to implement a button refresh animation that involves scaling the text and icon with endless rotation. Have a look:

LaunchedEffect

LaunchedEffect is a composable function with two parameters — Key1 and block.

1. key1 — It’s of type Any, whenever the value passed in this parameter changes, it triggers the block function.
2. block — Kotlin suspend function with its own coroutine scope. The running scope gets canceled and relaunched whenever the value key1 is updated. The coroutine will be canceled when the LaunchedEffect leaves the composition.

Have a look at the function signature:

@Composable
@NonRestartableComposable
@OptIn(InternalComposeApi::class)
fun LaunchedEffect(
    key1: Any?,
    block: suspend CoroutineScope.() -> Unit
)

In our use case, we can use the LaunchedEffect function to execute animation on initial compose or recomposition triggered by any state change.

InfiniteTransition