https://kotlinlang.org logo
#compose
Title
# compose
m

mattinger

01/03/2022, 6:57 PM
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)
b

Bradleycorn

01/03/2022, 7:03 PM
Seems like a job for
keyframes
(says the guy who just learned animations last week and now considers himself an expert on the subject 😄 )
👆 1
m

mattinger

01/03/2022, 7:39 PM
Thanks @Bradleycorn
b

Bradleycorn

01/03/2022, 7:39 PM
Like this:
Copy code
@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 }
        )
    }

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

mattinger

01/03/2022, 9:50 PM
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.
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