{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

CrossfadeKt

public final class CrossfadeKt


Summary

Public methods

static final void
@ExperimentalAnimationApi
@Composable
<T extends Object> Crossfade(
    @NonNull Transition<@NonNull T> receiver,
    @NonNull Modifier modifier,
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    @NonNull Function1<@NonNull targetState, Object> contentKey,
    @Composable @NonNull Function1<@NonNull targetState, Unit> content
)

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

static final void
@Composable
<T extends Object> Crossfade(
    @NonNull T targetState,
    @NonNull Modifier modifier,
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    @NonNull String label,
    @Composable @NonNull Function1<@NonNull T, Unit> content
)

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

Public methods

Crossfade

@ExperimentalAnimationApi
@Composable
public static final void <T extends Object> Crossfade(
    @NonNull Transition<@NonNull T> receiver,
    @NonNull Modifier modifier,
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    @NonNull Function1<@NonNull targetState, Object> contentKey,
    @Composable @NonNull Function1<@NonNull targetState, Unit> content
)

Crossfade allows to switch between two layouts with a crossfade animation. The target state of this Crossfade will be the target state of the given Transition object. In other words, when the Transition changes target, the Crossfade will fade in the target content while fading out the current content.

content is a mapping between the state and the composable function for the content of that state. During the crossfade, content lambda will be invoked multiple times with different state parameter such that content associated with different states will be fading in/out at the same time.

contentKey will be used to perform equality check for different states. For example, when two states resolve to the same content key, there will be no animation for that state change. By default, contentKey is the same as the state object. contentKey can be particularly useful if target state object gets recreated across save & restore while a more persistent key is needed to properly restore the internal states of the content.

Parameters
@NonNull Modifier modifier

Modifier to be applied to the animation container.

@NonNull FiniteAnimationSpec<@NonNull Float> animationSpec

the AnimationSpec to configure the animation.

Crossfade

@Composable
public static final void <T extends Object> Crossfade(
    @NonNull T targetState,
    @NonNull Modifier modifier,
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    @NonNull String label,
    @Composable @NonNull Function1<@NonNull T, Unit> content
)

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

import androidx.compose.animation.Crossfade
import androidx.compose.material.Text

Crossfade(targetState = "A") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}
Parameters
@NonNull T 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.

@NonNull Modifier modifier

Modifier to be applied to the animation container.

@NonNull FiniteAnimationSpec<@NonNull Float> animationSpec

the AnimationSpec to configure the animation.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.