New Compose Multiplatform components arrived on Composables UICheck it out →

Component in Compose Animation

Crossfade

Common

Last updated:

Installation

dependencies {
   implementation("androidx.compose.animation:animation:1.7.0-beta04")
}

Overloads

@Composable
@OptIn(ExperimentalAnimationApi::class
@Deprecated(
    "Crossfade API now has a new label parameter added.",
    level = DeprecationLevel.HIDDEN

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

Parameters

namedescription
targetStateis 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.
modifierModifier to be applied to the animation container.
animationSpecthe [AnimationSpec] to configure the animation.
labelAn optional label to differentiate from other animations in Android Studio.

Code Example

CrossfadeSample

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