In this code example using `Crossfade` (see thread...

# compose

[Rick Regan]

In this code example using Crossfade (see thread), when I click "Reset", the Button labelled "Button" fades and goes back to full color. I don't know what that animation is, or why it's animating anything at all.

[Rick Regan]

class AnimationState(val i: Int = 0)
var animationState by mutableStateOf(AnimationState())

@Composable
fun CrossfadeButton() {
    Column {
        Button(onClick = { animationState = AnimationState() },
        ) {
            Text(text = "Reset")
        }

        Crossfade(targetState = animationState, animationSpec = tween(2000)) { currentAnimationState ->
            Button(onClick = { },
            ) {
                Text(text = "Button")
            }
        }
    }
}

CrossfadeButton.mp4

[Doris Liu]

It's crossfading two buttons that look exactly the same. The intermediate color shown in the video is likely the result of compositing two non-fully opaque layers of purple buttons.

[Rick Regan]

I was expecting this to be a NOOP. If I think of cross-fading (cross-dissolving) two identical images in a slideshow, the fade out and fade in would overlap and nothing should happen visually. But I'm not a media expert either :)

[Rick Regan]

@Doris Liu I modified my example, basing it on the one at https://developer.android.com/jetpack/compose/animation. When I write it this way, I would expect just the text to crossfade (between green and red), but the button also fades out/fades in like above. I just want to verify that this is the way it's supposed to work. Thanks.

// Based on Crossfade example at <https://developer.android.com/jetpack/compose/animation>
@Composable
fun CrossfadeButton() {
    var currentPage by remember { mutableStateOf("A") }
    Column {
        Button(onClick = { currentPage = if (currentPage == "A")  "B" else "A" },
        ) {
            Text(text = "Swap")
        }

        Crossfade(targetState = currentPage, animationSpec = tween(2000)) { screen ->
            when (screen) {
                "A" -> Button(onClick = { }) {
                    Text(text = "Button A",
                        color = Color.Green)
                }
                "B" -> Button(onClick = { }) {
                    Text(text = "Button B",
                    color = Color.Red)
                }
            }
        }
    }
}

[Rick Regan]

(To get just the text to crossfade I could put the crossfade inside the button. But I was just trying to show again how the button crossfades when it itself hasn't changed.)

[Doris Liu]

That's work as intended. The alpha is applied at the root of the content (in Crossfade), and there's no detection of content delta between states. 🙂

[Rick Regan]

Ok. I guess Button is special then because Text does not get an alpha (if you remove Button from my first example and just leave the Text it looks like the "NOOP" I expect).

[Rick Regan]

Maybe Text is special. Box and Surface work like Button I see.

[Doris Liu]

It's likely related to how different colors composite. Try changing text to purple and see how that looks.

[Rick Regan]

It doesn't seem to matter what color Text is (I tried Color.Magenta and a few others).

[Doris Liu]

Maybe @Nader Jawad would be able to share some insights on this from graphics perspective. 🙂