On this we wish to present loading animation whereas ready. Nonetheless, when the wait is completed, we wish to move the animation’s success markup. Additionally, the animation ought to cease.
This is said to the GitHub commit.
For this enterprise logic I added Success to cease the animation when it is finished. First, check out the animation operate:
@Composable
enjoyable ComposeLottieAnimation(modifier: Modifier, isCompleted: Boolean) {
val clipSpecs = LottieClipSpec.Progress(
min = 0.0f,
max = if (isCompleted) 0.44f else 0.282f
)
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.uncooked.anim_loading_success_failed))
LottieAnimation(
modifier = modifier,
composition = composition,
iterations = if (isCompleted) 1 else LottieConstants.IterateForever,
clipSpec = clipSpecs,
)
}
You’ll be able to see Accomplished as parameter. It helps to handle most worth of animation progress. Why do not we modify the minimal worth? As a result of, this Lottie animation development is Loading > Success > Loading > Failed.
Be aware: If we modify the min worth, the place to begin of the animation will change. We’ll do that in one other part.
Additionally we modify Repeat to 1 to play the animation as soon as efficiently.
Lastly, I wish to exhibit calling “ComposeLottieAnimation()“operate in editor:
@Composable
enjoyable ComposeLottieScreen() {
var isSuccess by bear in mind { mutableStateOf(false) }
Field(modifier = Modifier
.fillMaxSize()
.background(shade = Colour.White)
){
ComposeLottieAnimation(
modifier = Modifier.align(alignment = Alignment.Middle),
isCompleted = isSuccess
)
Button(
modifier = Modifier.align(alignment = Alignment.BottomCenter).padding(backside = 45.dp),
onClick = { isSuccess = true }
) {
Textual content(
textual content = "Profitable"
)
}
}
}
An important level is isSuccess Change. It may well hold its newest boolean worth throughout reordering due to key phrase memorization. Clicking the button is altering the worth of isSuccess.
In a nutshell we have now enterprise logic on Lottie animation in Jetpack Compose:
An excellent begin! You may have accomplished your first enterprise logic with the Lottie animation in Drafting
The loading animation will play within the meantime. Then when the wait ends (Click on the Success button), we wish to transfer the animation’s success marker. It can cease till it reboots. After we click on restart, the animation will begin from the loading.
This is said to the GitHub commit.
If you have not checked but”B) Half 1/3“, please test it. The reason being that the code is already there Success logic like Carried out. So we simply want to alter the mutable worth:
var isSuccess by bear in mind { mutableStateOf(false) }
// Restart button.
Button(
modifier = Modifier
.align(alignment = Alignment.CenterHorizontally)
.padding(backside = 45.dp),
onClick = {
isSuccess = false // Restart animation.
}
) {
Textual content(
textual content = "Restart"
)
}
As you may see, clicking the restart button restarts the animation from the loading state:
Good job! You added a second enterprise logic with the Lottie animation in Compose
Don’t hand over! The final half is a crucial milestone