Good job! You added second business logic with Lottie animation in Compose 👏

Do not give up! Last part is a milestone 🪐

B) Part 3/3 — Stop Lottie Animation and show Failure step in Compose

In this final step, Lottie animation should play in loading state until getting success or failure. When the animation gets one of them, animation should move related step such as Success checkmark or Failure cancel, then has to stop. Moreover, animation has to come back loading step with clicking reset button.

Here is related GitHub commit.

Previously, we had only one state for completion which is Success. Now, we need to consider about Failure.

@Composable
fun ComposeLottieScreen() {

    var isSuccess by remember { mutableStateOf(false) }
    var isFailed by remember { mutableStateOf(false) }

    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.White)
    ){
        ComposeLottieAnimation(
            modifier = Modifier.align(alignment = Alignment.Center),
            isSuccess = isSuccess,
            isFailed = isFailed
        )

        Column(
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {

            // Successful button.
            Button(
                modifier = Modifier
                    .align(alignment = Alignment.CenterHorizontally)
                    .padding(bottom = 15.dp),
                onClick = {
                    isSuccess = true
                    isFailed = false
                }
            ) {
                Text(
                    text = "Successful"
                )
            }

            // Failure button.
            Button(
                modifier = Modifier
                    .align(alignment = Alignment.CenterHorizontally)
                    .padding(bottom = 15.dp),
                onClick = {
                    isFailed = true
                    isSuccess = false
                }
            ) {
                Text(
                    text = "Failure"
                )
            }

            // Restart button.
            Button(
                modifier = Modifier
                    .align(alignment = Alignment.CenterHorizontally)
                    .padding(bottom = 45.dp),
                onClick = {
                    isSuccess = false
                    isFailed = false
                }
            ) {
                Text(
                    text = "Restart"
                )
            }
        }
    }
}

According to states, we have to get change start and stop durations of the animation with iteration.

Previously, I mentioned in “B) Part 1/3 — Note”. Now, we have to change min value of animation because failure part of the animation plays after success part. Because of the reason, we have to start animation after success time.

In below code, you can see that if “isFailed” is true, animation start from 0.49 which is after success duration (0.44):

@Composable
fun ComposeLottieAnimation(modifier: Modifier, isSuccess: Boolean, isFailed: Boolean) {

    val clipSpecs = LottieClipSpec.Progress(
        min = if (isFailed) 0.499f else 0.0f,
        max = if (isSuccess) 0.44f else if (isFailed) 0.95f else 0.282f
    )

    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))

    LottieAnimation(
        modifier = modifier,
        composition = composition,
        iterations = if (isSuccess || isFailed) 1 else LottieConstants.IterateForever,
        clipSpec = clipSpecs,
    )
}

As a summary, we have a Lottie animation in Jetpack Compose UI with implemented business logic:

Loading > Success > Reset > Loading > Failure > Reset > …

Congratulations! You completed: Lottie Animation in Jetpack Compose and Adding Business Logic on Compose Lottie Animation. 👏

Stay tuned: https://linktr.ee/canerkaseler 🤝

Thanks! ☕️