So i’m trying to animate through a range of different colors represented as a list. I am able to us...

# compose

[mattinger]

So i’m trying to animate through a range of different colors represented as a list. I am able to use animateColor to animate between two different colors, but i’m having a hard time finding a way to animate through a list. in the xml world, i’d simply use ValueAnimator.ofArgb function. I’m not finding an equivalent in compose (at least not easily)

[Bradleycorn]

Seems like a job for keyframes
(says the guy who just learned animations last week and now considers himself an expert on the subject 😄 )

[mattinger]

Thanks @Bradleycorn

[Bradleycorn]

Like this:

@Composable
fun ColorAnimator() {

    var someState by remember { mutableStateOf(true) }
    val transition = updateTransition(targetState = someState)

    val color by transition.animateColor(
        transitionSpec = {
                keyframes {
                durationMillis = 4000
                Color.Red at 1000
                Color.Green at 2000
                Color.Blue at 3000
            }
        },
        label = "color change"
    ) { state ->
        when {
            state -> MaterialTheme.colors.primary
            else -> MaterialTheme.colors.secondary
        }
    }

    // Background ....
    Surface(color = MaterialTheme.colors.background) {

        // A spacer with it's color animated
        Spacer(
            modifier = Modifier
                .size(200.dp)
                .padding(24.dp)
                .background(color)
                .clickable { someState = !someState }
        )
    }

}

[Bradleycorn]

screen-20220103-144327~2.mp4

[Bradleycorn]

@mattinger -☝️ is a demo of the above code

[mattinger]

Thanks @Bradleycorn I figured it out. Though i still get annoyed everytime i draw on a canvas with drawArc and it goes outside the bounds of the current view. I suspect it’s because of the stroke width, and it seems to be splitting the difference. If i make the canvas 96dp, and a stroke width of 4, without giving an explicit size for the arc, half the stroke is inside, and half outside the canvas.

[mattinger]

so the parent needs some padding in order to make it look right. I changed my code a bit to accout for this with explicit sizing on the draw commands though