Folks, is there any easy way to animate the

Brush

object? At least for

SolidColor

?

There is animateColorAsState which you can pass to Brush color parameter

Maybe I’m missing something obvious, but could you give an example? Eg Box with a background with solid color brush, animated to another color?

Have you seen this by chance? They change the solid color of a square too 😁

@Colton Idle Will check tomorrow, thanks :) though I somehow can guess they drive it from color. I need to drive it from brush and I can't my head over it

This is a simple example, animating a color passed into

SolidColor

, which returns a

Brush

@Preview
@Composable
fun AnimateColor() {
    var toggle by remember { mutableStateOf(false) }
    val animatedColor by animateColorAsState(
        targetValue = if (toggle) Color.Yellow else Color.Magenta,
        animationSpec = tween(2000)
    )

    MaterialTheme {
        Surface {
            Box(
                Modifier
                    .clickable { toggle = !toggle }
                    .aspectRatio(1f)
                    .background(SolidColor(animatedColor))
                    .padding(20.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    "Box with changing colors",
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.h3
                )
            }
        }
    }
}

Animating Brush directly could be cool since animating between SolidColor & Brush.linear/radial/sweep gradients would be also possible

@Chris Sinco [G] yes, I know how to animate a color, but I somehow cannot find the right combination of a little bit more complex case. I have a simplistic theming system, where components like Button have associated set of ButtonAppearance instances depending on state (hover, pushed), and variation (primary, secondary, etc). Now when Button goes from one state to another I need to transition from one appearance to another. Now I have something like this (simplified for less properties):

@Composable
fun updateButtonAppearanceTransition(appearance: ButtonAppearance): AppearanceTransitionState {
    val transition = updateTransition(appearance)
    val background = mutableStateOf(appearance.background) // TODO: animate background color
    val shapeStroke = transition.animateShapeStroke(label = "AnimateShapeStroke") { it.shapeStroke }
    val haloStroke = transition.animateShapeStroke(label = "AnimateHaloStroke") { it.haloStroke }
    return AppearanceTransitionState(background, shapeStroke, haloStroke)
}

When it comes to built-in stuff, like colors it’s simple. But I can’t find how to deal with the Brush here