Multi Color Progress Bar Part2 — Animating the Progess

Cotinuing from part-1 https://raghunandan2005.medium.com/writing-custom-components-in-compose-part1-multi-color-progress-bar-2a7343960e16

Now i need to animate the progress colors. First i need to animate the green color progress and then yellow and so on. That means i need to run the animation sequentially.

val greenAnimate = remember { Animatable(0f) }

The above remembers the state intially to animate value starting from 0f to 1f.

Then we use LaunchedEffect which is one of the side effects which is where we launch the animation once.

Pay attention to the first line the LaunchEffect takes those animatables so that we can run animation sequentially using launch scope. This scope waits for one animation to finish and then runs the other animation

Actually we don’t need launch inside LaunchedEffect as we want the progress to start in a linear fashion. So this is the updated code

 LaunchedEffect(greyAnimate,yellowAnimate,redAnimate,greenAnimate,redAnimate) {
            greenAnimate.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
            yellowAnimate.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
            redAnimate.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
            greyAnimate.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
            remainingAnimate.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
    }

Finally we update the offset values using this animatable

The result

Interesting read on animation by Googler https://medium.com/androiddevelopers/custom-canvas-animations-in-jetpack-compose-e7767e349339