Compose Unstyled 2.0 is out! Check the official announcement blog ->
Composable Function

DeferredAnimatedContent

AnimatedContent is a container that automatically animates its content when Transition.targetState changes.

DeferredAnimatedContent

Source set: Common
@ExperimentalDeferredTransitionApi
@Composable
public fun <S> DeferredTransition<S>.DeferredAnimatedContent(
    modifier: Modifier = Modifier,
    transitionSpec: AnimatedContentTransitionScope<S>.() -> ContentTransform = {
        (fadeIn(animationSpec = tween(220, delayMillis = 90)) +
                scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90)))
            .togetherWith(fadeOut(animationSpec = tween(90)))
    },
    contentAlignment: Alignment = Alignment.TopStart,
    contentKey: (targetState: S) -> Any? = { it },
    mutableTransformSpec: AnimatedContentTransitionScope<S>.() -> MutableContentTransform? = {
        null
    },
    content: @Composable() AnimatedContentScope.(targetState: S) -> Unit,
)

AnimatedContent is a container that automatically animates its content when Transition.targetState changes. Its content for different target states is defined in a mapping between a target state and a composable function.

IMPORTANT: The targetState parameter for the content lambda should always be taken into account in deciding what composable function to return as the content for that state. This is critical to ensure a successful lookup of all the incoming and outgoing content during content transform.

When Transition.targetState changes, content for both new and previous targetState will be looked up through the content lambda. They will go through a ContentTransform so that the new target content can be animated in while the initial content animates out. Meanwhile the container will animate its size as needed to accommodate the new content, unless SizeTransform is set to null. Once the ContentTransform is finished, the outgoing content will be disposed.

If Transition.targetState is expected to mutate frequently and not all mutations should be treated as target state change, consider defining a mapping between Transition.targetState and a key in contentKey. As a result, transitions will be triggered when the resulting key changes. In other words, there will be no animation when switching between Transition.targetStates that share the same key. By default, the key will be the same as the targetState object.

Lifecycle: The deferred phase starts when DeferredTransitionState.defer is called. It ends and the automatic transition begins when DeferredTransitionState.animateTo is called. Transformations: During this phase, you can manually manipulate the entering and exiting content's transformations (via MutableContentTransform). These transformations are applied on top of the transition's initial state. For example, if the enter transition starts at an alpha of 0.5, applying a manual alpha of 0.5 will result in a combined alpha of 0.25.

Handoff: Once the transition starts, the manually applied transformations are seamlessly handed off to the configured transitionSpec. For exiting content, a "sustain unless specified" policy is applied: if an exit transition (e.g. fadeOut) is specified, the hand-off will animate towards the target value of that transition. However, if no exit transition is specified for a given property (e.g. slideOut is missing), that property will sustain its last manual value until the entire transition completes.

Note: While in the deferred phase, entering content remains in the EnterExitState.PreEnter state, and exiting content remains in the EnterExitState.Visible state.

Parameters
modifier is applied to the Layout created by AnimatedContent, which houses all the animating contents.
transitionSpec specifies the enter/exit animations, as well as size animation (if applicable). By default, a fadeIn and scaleIn will be used for the entering content, and fadeOut for the exiting content. The ContentTransform returned by transitionSpec can be created using togetherWith with EnterTransition and ExitTransition.
contentAlignment specifies the alignment of the animated content. By default, it'll be aligned to the top start of the container.
contentKey A key to identify the content.
mutableTransformSpec A specification to control an optional manual transformation during the deferred phase (e.g., for predictive back gestures) before the main transition begins. This is only active if the Transition was created using rememberTransition with DeferredTransitionState. By default, this returns null, meaning no manual transformations are applied.
content The composable function to render the content for a given state.

Last updated: