Crossfade

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

A container that fades between the contents of its states. When targetState changes, the new content fades in and the old content fades out, both under animationSpec.

The container is a Box holding one box per content on screen, so it takes the room both contents need while both are on screen, then the room the new content needs. It does not animate its size.

Crossfade(targetState = page) { shown ->
when (shown) {
Page.Summary -> Summary()
Page.Details -> Details()
}
}

The content lambda must show the state it is passed, never a state read elsewhere: the container composes it once per state on screen, and the old content must keep showing its state while it fades out.

Each content fades as one image. Text loses LCD subpixel antialiasing while a fade runs, and a heavyweight child stays at full opacity; see AnimatedContent.

Parameters

targetState

the state whose content the container settles on.

modifier

the SwingModifier applied to the container.

animationSpec

the spec both the fade in and the fade out run under.

label

names the transition in a tool that inspects a composition. It is read once, when the transition is created.

content

the composable content of one state of the container.


@Composable
fun <T> Transition<T>.Crossfade(modifier: SwingModifier = SwingModifier, animationSpec: FiniteAnimationSpec<Float> = tween(), contentKey: (targetState: T) -> Any? = { it }, content: @Composable (targetState: T) -> Unit)

A container that fades between the contents of this transition's states. Containers built on one transition animate together.

val transition = updateTransition(page)
transition.Crossfade { Body(it) }
transition.Crossfade { Footer(it) }

Otherwise behaves as the overload taking a target state.

Parameters

modifier

the SwingModifier applied to the container.

animationSpec

the spec both the fade in and the fade out run under.

contentKey

states with equal keys share one composition and component, so a change between them fades nothing. The state itself by default.

content

the composable content of one state of the container.