Infinite color animation sequentially in Jetpack Compose

Question

I've just learned how to animate a color from an initial value to a target value indefinitely. Now I want that animation to go through more colors.

This is what I've got so far:

@Preview(heightDp = 30, widthDp = 90)
@Composable
fun BlinkingPreview() {
    val infiniteTransition = rememberInfiniteTransition()
    val ghosting = infiniteTransition.animateColor(Color.Green, Color.Black, animationSpec = infiniteRepeatable(tween(8000))).value
    val overshooting = infiniteTransition.animateColor(Color.Black, Color.White, animationSpec = infiniteRepeatable(tween(1000))).value
    val waning = infiniteTransition.animateColor(Color.White, Color.Green, animationSpec = infiniteRepeatable(tween(1000))).value

    Row {
        Spacer(Modifier.fillMaxHeight().weight(1f).background(ghosting))
        Spacer(Modifier.fillMaxHeight().weight(1f).background(overshooting))
        Spacer(Modifier.fillMaxHeight().weight(1f).background(waning))
    }
}

This gives this output:

What I really want is a single Spacer cycling between all those color ramps, like this (I've glued the previous output manually in GIMP):

rslemos · Accepted Answer · 2024-03-17 19:27:20Z

0

I did it with animateColor from Green to Green and keyframes to set intermediate goals:

@Preview(heightDp = 30, widthDp = 90)
@Composable
fun BlinkingPreview() {
    val infiniteTransition = rememberInfiniteTransition()
    val blinking = infiniteTransition.animateColor(
        Color.Green, Color.Green,
        animationSpec = infiniteRepeatable(
            animation = keyframes {
                durationMillis = 10000
                Color.Black at 8000
                Color.White at 9000
            }
        )
    ).value

    Row {
        Spacer(Modifier.fillMaxHeight().weight(1f).background(blinking))
    }
}

answered Mar 17, 2024 at 19:27

rslemos

2,85229 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Infinite color animation sequentially in Jetpack Compose

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related