Crossfade

Component in Compose Animation

[Crossfade] allows to switch between two layouts with a crossfade animation.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.animation:animation:1.8.0-alpha04")
}

Overloads

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun <T> Crossfade(
    targetState: T,
    modifier: Modifier = Modifier,
    animationSpec: FiniteAnimationSpec<Float> = tween(),
    label: String = "Crossfade",
    content: @Composable (T) -> Unit
)

Parameters

name	description
targetState	is a key representing your target layout state. Every time you change a key the animation will be triggered. The [content] called with the old key will be faded out while the [content] called with the new key will be faded in.
modifier	Modifier to be applied to the animation container.
animationSpec	the [AnimationSpec] to configure the animation.
label	An optional label to differentiate from other animations in Android Studio.

@Deprecated("Crossfade API now has a new label parameter added.", level = DeprecationLevel.HIDDEN)
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun <T> Crossfade(
    targetState: T,
    modifier: Modifier = Modifier,
    animationSpec: FiniteAnimationSpec<Float> = tween(),
    content: @Composable (T) -> Unit
)

Code Example

CrossfadeSample

@Composable
fun CrossfadeSample() {
    Crossfade(targetState = "A") { screen ->
        when (screen) {
            "A" -> Text("Page A")
            "B" -> Text("Page B")
        }
    }
}