animateAsState in Jetpack Compose – flüssige Animationen in einer Zeile
Du willst, dass sich Größe, Farbe oder Position weich verändern, statt hart umzuspringen? In Compose brauchst du dafür keinen Animator und keinen State-Maschinen-Zoo – ein animateDpAsState oder animateColorAsState reicht. Ich zeige dir, wie das funktioniert.
Wenn in meiner App ein Button gedrückt wird oder sich eine Karte aufklappt, soll das nicht ruckartig passieren, sondern weich. In der alten View-Welt hieß das: ValueAnimator, Listener, Aufräumen. In Jetpack Compose ist es fast schon langweilig einfach – du animierst nicht die Ansicht, sondern den Wert, und die UI folgt.
Das Prinzip: animate*AsState
Statt einen Zielwert direkt zu setzen, schickst du ihn durch eine animate…AsState-Funktion. Compose interpoliert dann automatisch vom alten zum neuen Wert und löst bei jedem Zwischenschritt eine Recomposition aus.
@Composable
fun GefaelltMirButton() {
var aktiv by remember { mutableStateOf(false) }
// Der Wert selbst wird animiert – nicht die View.
val groesse by animateDpAsState(
targetValue = if (aktiv) 64.dp else 48.dp,
label = "groesse"
)
val farbe by animateColorAsState(
targetValue = if (aktiv) Color(0xFFE0245E) else Color.Gray,
label = "farbe"
)
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = "Gefällt mir",
tint = farbe,
modifier = Modifier
.size(groesse)
.clickable { aktiv = !aktiv }
)
}Ein Tap kippt aktiv, und Größe wie Farbe gleiten weich in den neuen Zustand. Kein Listener, kein manuelles Aufräumen.
Das Tempo steuern: animationSpec
Standardmäßig nimmt Compose eine dezente Feder. Willst du es schneller, langsamer oder federnder, gibst du einen animationSpec mit:
val groesse by animateDpAsState(
targetValue = if (aktiv) 64.dp else 48.dp,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
),
label = "groesse"
)Für gleichmäßige, taktgenaue Übergänge nimmst du statt spring ein tween(durationMillis = 300).
Ein- und Ausblenden: AnimatedVisibility
Wenn ein Element nicht nur seinen Wert ändert, sondern ganz erscheinen oder verschwinden soll, ist AnimatedVisibility der passende Baustein:
AnimatedVisibility(
visible = aktiv,
enter = fadeIn() + expandVertically(),
exit = fadeOut() + shrinkVertically()
) {
Text("Danke fürs Liken!")
}Worauf ich achte
- Gib jeder Animation ein
label. Das kostet nichts und macht den Animation-Inspector im Android Studio lesbar. - Animiere Zustände, keine Pixel. Du beschreibst nur „vorher" und „nachher" – den Weg dazwischen übernimmt Compose.
- Nicht übertreiben. Eine ruhige, kurze Animation wirkt hochwertig; drei gleichzeitig zappelnde lenken ab.
Ich baue solche Details bewusst ein, weil sie eine App teurer aussehen lassen, als sie zu bauen war. Wenn du eine Android-App in Kotlin und Jetpack Compose brauchst, die sich rund anfühlt, meld dich über bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
rememberCoroutineScope – Coroutinen aus einem Klick in Jetpack Compose starten
LaunchedEffect ist super für Effekte beim Zusammenbau der UI – aber wie startest du eine Coroutine, wenn der Nutzer auf einen Button tippt? Dafür gibt es rememberCoroutineScope. Ich zeige den Unterschied und ein typisches Snackbar-Beispiel.
value class in Kotlin – typsichere IDs ohne Extra-Kosten zur Laufzeit
Ein `String` für die Nutzer-ID, ein `String` für die Bestell-ID – und schon vertauschst du sie irgendwann. Mit `@JvmInline value class` bekommst du echte, unverwechselbare Typen, die zur Laufzeit trotzdem nur der nackte Wert sind. Kein Wrapper-Objekt, keine Bremse.
when in Kotlin – mehr als ein switch
when ersetzt das switch aus Java, kann aber viel mehr: es liefert einen Wert zurück, prüft Bereiche und Mengen, arbeitet ohne Argument wie eine if-Kette und erzwingt bei sealed-Typen Vollständigkeit. Ich zeige dir alle vier Varianten.