AnimatedVisibility in Jetpack Compose – ein- und ausblenden, das nicht springt

Der häufigste Weg, in Compose etwas ein- oder auszublenden, ist ein if. Funktioniert – sieht aber ruckartig aus: Das Element ist da, im nächsten Bild ist es weg, alles darunter springt. AnimatedVisibility macht denselben Job weich. Du gibst ihm einen visible-Zustand, es kümmert sich um den Übergang.

Der einfachste Fall

import androidx.compose.animation.AnimatedVisibility

@Composable
fun Hinweis(sichtbar: Boolean) {
    AnimatedVisibility(visible = sichtbar) {
        // Alles hier drin wird animiert ein-/ausgeblendet.
        Text("Gespeichert!")
    }
}

Mehr braucht es nicht. Die Voreinstellung ist bereits sinnvoll: Beim Erscheinen faded der Inhalt ein und klappt auf, beim Verschwinden faded er aus und klappt zu. Der Platz wird währenddessen sauber mit-animiert – nichts springt.

Eigene Ein- und Ausblendung

Willst du es steuern, übergibst du enter und exit. Übergänge lassen sich mit + kombinieren:

import androidx.compose.animation.*
import androidx.compose.animation.core.tween

AnimatedVisibility(
    visible = sichtbar,
    enter = fadeIn(tween(250)) + slideInVertically { it / 2 }, // von halber Höhe herein
    exit  = fadeOut(tween(200)) + shrinkVertically()
) {
    Card { Text("Details …") }
}

slideInVertically { it / 2 } bekommt die volle Höhe des Inhalts (it) und startet bei der Hälfte – so gleitet die Karte von unten herein, statt einfach aufzupoppen.

Direkt beim ersten Anzeigen animieren

Standardmäßig wird das erste Erscheinen nicht animiert (das Element ist ja schon da, wenn der Screen aufgeht). Willst du auch den Erstauftritt animieren, sag es explizit:

AnimatedVisibility(
    visible = sichtbar,
    enter = fadeIn(),
    exit = fadeOut()
    // ab Compose: Parameter je nach Version, z. B. über MutableTransitionState
)

Für einen animierten Erstauftritt nutzt du einen MutableTransitionState, den du gleich auf „sichtbar werden" setzt:

val state = remember { MutableTransitionState(false).apply { targetState = true } }

AnimatedVisibility(visibleState = state, enter = fadeIn(), exit = fadeOut()) {
    Text("Blende beim Öffnen ein")
}

Faustregeln

• visible statt if: Wo du früher ein Element weggelassen hast, wickelst du es in AnimatedVisibility – der Rest bleibt gleich.
• enter/exit mit + kombinieren: fadeIn() + slideInVertically { … } ist die häufigste Mischung. Faden allein wirkt schnell fad, Bewegung allein hart.
• Für Listen anders: Einzelne Einträge in einer LazyColumn animierst du nicht mit AnimatedVisibility, sondern mit Modifier.animateItem() – sonst kämpfen beide um das Layout.
• prefers-reduced-motion mitdenken: Wer am System „Bewegung reduzieren" gesetzt hat, sollte kürzere oder gar keine Slides sehen – gute Apps respektieren das.

Wenn du eine Android-App möchtest, die sich flüssig und wertig anfühlt statt ruckartig, schreib mir – genau solche Details baue ich in Kotlin und Jetpack Compose.

Quellen

• Animationen in Compose – AnimatedVisibility (developer.android.com)
• EnterTransition und ExitTransition – API-Referenz (developer.android.com)