Android Academy · Lektion

AnimatedVisibility und Transitions

Das Ein- und Ausblenden von Inhalten animieren

Lektion 3 von 413 Schritte

AnimatedVisibility und Transitions ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Einblenden animieren

Inhalte abrupt ein- und auszublenden wirkt störend. AnimatedVisibility von Compose animiert ein Composable beim Ein- und Austreten aus dem Layout.

Schließen Sie Ihre Inhalte darin ein und steuern Sie die Sichtbarkeit mit einem Boolean. Wenn sich dieser Boolean ändert, spielt Compose eine Ein- oder Austrittsanimation ab, statt den Inhalt sofort ein- oder auszublenden.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Ein- und Austritts-Transitions

Mit den Parametern enter und exit können Sie genau festlegen, wie Inhalte erscheinen und verschwinden. Häufige Bausteine sind fadeIn/fadeOut, slideIn/slideOut sowie expandVertically/shrinkVertically.

Kombinieren Sie mehrere davon mit dem Operator +, damit sie gleichzeitig ausgeführt werden.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Die Transition-Spezifikation anpassen

Jede Ein- und Austritts-Transition akzeptiert ein animationSpec. Damit können Sie Dauer und Easing genauso steuern wie bei animate*AsState.

Hier wird der Inhalt über 300 ms eingeblendet und schneller, über 150 ms, ausgeblendet. Dieses häufige Muster lässt das Schließen zügig wirken.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Auf- und Zuklappen

Für Bereiche, die weitere Inhalte einblenden, animieren expandVertically und shrinkVertically die Höhe, sodass umgebende Inhalte sanft Platz machen.

Das eignet sich ideal für einklappbare Panels, FAQ-Einträge oder „Mehr anzeigen“-Bereiche.

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: Ein Zustand, viele Werte

Wenn sich mehrere Eigenschaften gemeinsam auf Grundlage eines Zustands ändern sollen, koordiniert updateTransition diese Änderungen. Die Funktion erstellt ein Transition-Objekt, dessen untergeordnete Animationen synchron ablaufen.

Definieren Sie den Zustand und verwenden Sie anschließend für jede Eigenschaft Funktionen wie animateColor oder animateDp, die von diesem Zustand abhängen.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Eigenschaftsspezifisches Timing in einer Transition

Ein großer Vorteil von updateTransition ist das Timing pro Eigenschaft. Jedes untergeordnete animate*-Element kann ein eigenes transitionSpec angeben. So können sich Farbe und Größe unterschiedlich schnell bewegen und bleiben dennoch durch denselben Zustand koordiniert.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: Inhalte austauschen

Wenn sich der Inhalt selbst ändert und nicht nur seine Sichtbarkeit, verwenden Sie AnimatedContent. Die Funktion animiert zwischen altem und neuem Inhalt und blendet standardmäßig über.

Das eignet sich ideal für einen Zähler, eine Schrittanzeige oder den Wechsel zwischen Lade- und geladenem Zustand.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

Eigene AnimatedContent-Transitions

Passen Sie mit transitionSpec an, wie AnimatedContent Inhalte austauscht. Ein klassisches Muster für einen Zähler ist, den neuen Wert nach oben gleiten und den alten Wert wegschieben zu lassen, kombiniert mit einem Fade.

Das Schlüsselwort using verknüpft einen SizeTransform, sodass sich auch der Container sanft anpasst.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Listenelemente animieren

Innerhalb einer LazyColumn können hinzugefügte, entfernte oder verschobene Elemente mit Modifier.animateItem() im Inhalt jedes Elements an ihre Position animiert werden.

So erhalten Sie eine sanfte Neuordnung und Einfügung, ohne etwas manuell verwalten zu müssen.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Mit Crossfade ganze Bildschirme überblenden

Crossfade ist eine einfache, fokussierte Hilfsfunktion, die zwischen zwei Zuständen überblendet. Sie eignet sich hervorragend für den Wechsel ganzer Bildschirme oder größerer UI-Zustände.

Übergeben Sie den aktuellen Zustand und eine Content-Lambda. Wenn sich der Zustand ändert, blendet Crossfade den alten Inhalt aus und den neuen ein.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Eintritt untergeordneter Elemente koordinieren

Innerhalb eines Blocks von AnimatedVisibility erhalten Sie einen AnimatedVisibilityScope, der Modifier.animateEnterExit() bereitstellt. Damit können einzelne untergeordnete Elemente zusätzlich zur Transition des übergeordneten Elements eigene Ein- und Austrittsanimationen erhalten.

Beispielsweise kann ein Panel hereingleiten, während sein Titel etwas später eingeblendet wird, um einen gestaffelten Effekt zu erzeugen.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Kurztest

Sie möchten den Wechsel von der Zahl 3 zur Zahl 4 animieren, indem der neue Wert eingeblendet und hereingeschoben wird. Welche API eignet sich am besten?

Beantworte es in der interaktiven Lektion

Rückblick: Sichtbarkeit und Transitions

Sie können nun das Erscheinen, Verschwinden und Ändern von Inhalten animieren:

AnimatedVisibility animiert Ein- und Austritte mit fadeIn/Out, slideIn/Out und expand/shrink. Diese lassen sich mit + kombinieren.
updateTransition koordiniert viele Werte ausgehend von einem Zustand, jeweils mit einer eigenen Spezifikation.
AnimatedContent animiert den Wechsel zwischen unterschiedlichen Inhalten; Crossfade ist die einfache Fade-Variante.
Modifier.animateItem() animiert das Einfügen und die Neuordnung von Listenelementen.

Als Nächstes geht es um Gesten und physikbasierte Spring-Animationen für natürliche, interaktive Bewegung.

Kostenlos starten

Lerne Kotlin mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 36
Lektionen: 152

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „AnimatedVisibility und Transitions“ kostenlos?

Ja — der vollständige Text von „AnimatedVisibility und Transitions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „AnimatedVisibility und Transitions“?

Das Ein- und Ausblenden von Inhalten animieren Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „AnimatedVisibility und Transitions“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy