Animationsmodifikatoren und zusammensetzbare Funktionen

Compose bietet integrierte Composables und Modifier für gängige Animationsanwendungsfälle.

Integrierte animierte Composables

Compose bietet mehrere Composables, mit denen sich das Ein- und Ausblenden von Inhalten sowie Layoutänderungen animieren lassen.

Ein- und Ausblenden animieren

Grüne Komponente, die sich ein- und ausblendet
Abbildung 1: Animieren des Ein- und Ausblendens eines Elements in einer Spalte.

Die Composable AnimatedVisibility animiert das Ein- und Ausblenden ihres Inhalts.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

Standardmäßig werden die Inhalte durch Einblenden und Vergrößern angezeigt und durch Ausblenden und Verkleinern ausgeblendet. Sie können diesen Übergang anpassen, indem Sie die Objekte EnterTransition und ExitTransition angeben.

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text(
        "Hello",
        Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}
AnimationSnippets.kt

Wie im vorherigen Beispiel gezeigt, können Sie mehrere EnterTransition- oder ExitTransition-Objekte mit einem +-Operator kombinieren. Jedes Objekt akzeptiert optionale Parameter, um sein Verhalten anzupassen. Weitere Informationen finden Sie auf den Referenzseiten.

Beispiele für Ein- und Ausblendung

EnterTransition ExitTransition
fadeIn
Ein UI-Element wird nach und nach eingeblendet. 		fadeOut
Ein UI-Element wird nach und nach ausgeblendet.
slideIn
Ein UI-Element wird von außerhalb des Bildschirms eingeblendet. 		slideOut
Ein UI-Element wird vom Bildschirm geschoben.
slideInHorizontally
Ein UI-Element wird horizontal eingeblendet. 		slideOutHorizontally
Ein UI-Element wird horizontal aus dem sichtbaren Bereich geschoben.
slideInVertically
Ein UI-Element wird vertikal eingeblendet. 		slideOutVertically
Ein UI-Element gleitet vertikal aus dem Blickfeld.
scaleIn
Ein UI-Element wird vergrößert und in den sichtbaren Bereich verschoben. 		scaleOut
Ein UI-Element wird verkleinert und ist nicht mehr sichtbar.
expandIn
Ein UI-Element wird von einem zentralen Punkt aus eingeblendet. 		shrinkOut
Ein UI-Element schrumpft aus dem Blickfeld zu einem zentralen Punkt.
expandHorizontally
Ein UI-Element wird horizontal maximiert. 		shrinkHorizontally
Ein UI-Element wird horizontal verkleinert und verschwindet aus dem sichtbaren Bereich.
expandVertically
Ein UI‑Element wird vertikal maximiert. 		shrinkVertically
Ein UI-Element wird vertikal verkleinert und verschwindet aus dem Blickfeld.

AnimatedVisibility bietet auch eine Variante, die ein MutableTransitionState-Argument akzeptiert. So können Sie eine Animation auslösen, sobald die AnimatedVisibility-Composable dem Kompositionsbaum hinzugefügt wird. Außerdem ist es nützlich, um den Animationsstatus zu beobachten.

// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
val state = remember {
    MutableTransitionState(false).apply {
        // Start the animation immediately.
        targetState = true
    }
}
Column {
    AnimatedVisibility(visibleState = state) {
        Text(text = "Hello, world!")
    }

    // Use the MutableTransitionState to know the current animation state
    // of the AnimatedVisibility.
    Text(
        text = when {
            state.isIdle && state.currentState -> "Visible"
            !state.isIdle && state.currentState -> "Disappearing"
            state.isIdle && !state.currentState -> "Invisible"
            else -> "Appearing"
        }
    )
}
AnimationSnippets.kt

Ein- und Ausblenden für Kinder animieren

Für Inhalte innerhalb von AnimatedVisibility (direkte oder indirekte untergeordnete Elemente) kann mit dem Modifikator animateEnterExit ein unterschiedliches Animationsverhalten angegeben werden. Der visuelle Effekt für jedes dieser untergeordneten Elemente ist eine Kombination aus den Animationen, die in der AnimatedVisibility-Composable-Funktion angegeben sind, und den eigenen Ein- und Ausblendeanimationen des untergeordneten Elements.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) {
    // Fade in/out the background and the foreground.
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.DarkGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .animateEnterExit(
                    // Slide in/out the inner box.
                    enter = slideInVertically(),
                    exit = slideOutVertically()
                )
                .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                .background(Color.Red)
        ) {
            // Content of the notification…
        }
    }
}
AnimationSnippets.kt

In einigen Fällen möchten Sie möglicherweise, dass AnimatedVisibility überhaupt keine Animationen anwendet, damit untergeordnete Elemente jeweils eigene Animationen von animateEnterExit haben können. Geben Sie dazu EnterTransition.None und ExitTransition.None für die zusammensetzbare Funktion AnimatedVisibility an.

Benutzerdefinierte Animation hinzufügen

Wenn Sie benutzerdefinierte Animationseffekte hinzufügen möchten, die über die integrierten Ein- und Ausblendeanimationen hinausgehen, greifen Sie über die transition-Eigenschaft in der Content-Lambda für AnimatedVisibility auf die zugrunde liegende Transition-Instanz zu. Alle Animationsstatus, die der Übergang-Instanz hinzugefügt werden, werden gleichzeitig mit den Ein- und Ausblendeanimationen von AnimatedVisibility ausgeführt. AnimatedVisibility wartet, bis alle Animationen in Transition abgeschlossen sind, bevor der Inhalt entfernt wird. Bei Exit-Animationen, die unabhängig von Transition erstellt wurden (z. B. mit animate*AsState), kann AnimatedVisibility sie nicht berücksichtigen und entfernt die Content-Composable möglicherweise, bevor sie abgeschlossen sind.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) { // this: AnimatedVisibilityScope
    // Use AnimatedVisibilityScope#transition to add a custom animation
    // to the AnimatedVisibility.
    val background by transition.animateColor(label = "color") { state ->
        if (state == EnterExitState.Visible) Color.Blue else Color.Gray
    }
    Box(
        modifier = Modifier
            .size(128.dp)
            .background(background)
    )
}
AnimationSnippets.kt

Weitere Informationen zur Verwendung von Transition zum Verwalten von Animationen finden Sie unter Mehrere Attribute gleichzeitig mit einem Übergang animieren.

Animation basierend auf dem Zielstatus

Die AnimatedContent-Composable animiert ihren Inhalt, wenn er sich basierend auf einem Zielstatus ändert.

Row {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Add")
    }
    AnimatedContent(
        targetState = count,
        label = "animated content"
    ) { targetCount ->
        // Make sure to use `targetCount`, not `count`.
        Text(text = "Count: $targetCount")
    }
}
AnimationSnippets.kt

Standardmäßig wird der ursprüngliche Inhalt ausgeblendet und dann der Zielinhalt eingeblendet (dieses Verhalten wird als Durchblenden bezeichnet). Sie können dieses Animationsverhalten anpassen, indem Sie dem Parameter transitionSpec ein ContentTransform-Objekt zuweisen. Sie können eine Instanz von ContentTransform erstellen, indem Sie ein EnterTransition-Objekt mit einem ExitTransition-Objekt mit der Infix-Funktion with kombinieren. Sie können SizeTransform auf das ContentTransform-Objekt anwenden, indem Sie es mit der Infix-Funktion using anhängen.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare the incoming number with the previous number.
        if (targetState > initialState) {
            // If the target number is larger, it slides up and fades in
            // while the initial (smaller) number slides up and fades out.
            slideInVertically { height -> height } + fadeIn() togetherWith
                slideOutVertically { height -> -height } + fadeOut()
        } else {
            // If the target number is smaller, it slides down and fades in
            // while the initial number slides down and fades out.
            slideInVertically { height -> -height } + fadeIn() togetherWith
                slideOutVertically { height -> height } + fadeOut()
        }.using(
            // Disable clipping since the faded slide-in/out should
            // be displayed out of bounds.
            SizeTransform(clip = false)
        )
    }, label = "animated content"
) { targetCount ->
    Text(text = "$targetCount")
}
AnimationSnippets.kt

EnterTransition definiert, wie die Zielinhalte angezeigt werden sollen, und ExitTransition definiert, wie die ursprünglichen Inhalte ausgeblendet werden sollen. Zusätzlich zu allen EnterTransition- und ExitTransition-Funktionen, die für AnimatedVisibility verfügbar sind, bietet AnimatedContent slideIntoContainer und slideOutOfContainer. Sie sind praktische Alternativen zu slideInHorizontally/Vertically und slideOutHorizontally/Vertically, mit denen der Abstand zwischen den Folien anhand der Größen des ursprünglichen Inhalts und des Zielinhalts des AnimatedContent-Inhalts berechnet wird.

Mit SizeTransform wird festgelegt, wie die Größe zwischen den ursprünglichen und den Zielinhalten animiert werden soll. Beim Erstellen der Animation haben Sie Zugriff auf die ursprüngliche und die Zielgröße. Mit SizeTransform wird auch gesteuert, ob der Inhalt während Animationen auf die Komponentengröße zugeschnitten werden soll.

var expanded by remember { mutableStateOf(false) }
Surface(
    color = MaterialTheme.colorScheme.primary,
    onClick = { expanded = !expanded }
) {
    AnimatedContent(
        targetState = expanded,
        transitionSpec = {
            fadeIn(animationSpec = tween(150, 150)) togetherWith
                fadeOut(animationSpec = tween(150)) using
                SizeTransform { initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            // Expand horizontally first.
                            IntSize(targetSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            // Shrink vertically first.
                            IntSize(initialSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
        }, label = "size transform"
    ) { targetExpanded ->
        if (targetExpanded) {
            Expanded()
        } else {
            ContentIcon()
        }
    }
}
AnimationSnippets.kt

Ein- und Ausblendung von untergeordneten Elementen animieren

Wie bei AnimatedVisibility ist der Modifier animateEnterExit in der Content-Lambda von AnimatedContent verfügbar. Damit können Sie EnterAnimation und ExitAnimation auf jedes der direkten oder indirekten untergeordneten Elemente anwenden.

Benutzerdefinierte Animation hinzufügen

Wie AnimatedVisibility ist das Feld transition in der Inhalts-Lambda von AnimatedContent verfügbar. Damit können Sie einen benutzerdefinierten Animationseffekt erstellen, der gleichzeitig mit dem AnimatedContent-Übergang ausgeführt wird. Weitere Informationen finden Sie unter updateTransition.

Zwischen zwei Layouts animieren

Crossfade animiert zwischen zwei Layouts mit einer Überblendung. Durch Umschalten des an den Parameter current übergebenen Werts wird der Inhalt mit einer Überblendung ein- und ausgeblendet.

var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage, label = "cross fade") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}
AnimationSnippets.kt

Integrierte Modifikatoren für Animationen

Compose bietet Modifikatoren zum Animieren bestimmter Änderungen direkt in Composables.

Größenänderungen von Composables animieren

Grüne Composable, deren Größe sich fließend ändert.
Abbildung 2. Composable, das flüssig zwischen einer kleinen und einer größeren Größe animiert wird

Mit dem Modifikator animateContentSize wird eine Größenänderung animiert.

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

Animationen für Listenelemente

Wenn Sie das Neuanordnen von Elementen in einer Lazy List oder einem Lazy Grid animieren möchten, sehen Sie sich die Dokumentation zur Animation von Lazy Layout-Elementen an.

Zurück
Kurzanleitung
Weiter
Wertbasierte Animationen