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
AnimatedVisibility in Jetpack Compose – ein- und ausblenden, das nicht springt
Ein Element einfach mit if wegzulassen, poppt hart weg. AnimatedVisibility blendet es weich ein und aus – mit sinnvollen Voreinstellungen und, wenn du willst, deiner eigenen Kombination aus Faden und Bewegung. Ich zeige dir beides.
kotlinx.serialization: JSON und data class ohne Handarbeit verbinden
Eine API antwortet mit JSON, deine App will eine data class. Dazwischen steht in vielen Projekten ein handgeschriebener Parser. Mit kotlinx.serialization sind es eine Annotation und eine Zeile – und ein Schalter, ohne den deine App beim nächsten API-Update abstürzt.
snapshotFlow in Jetpack Compose – aus Compose-Zustand einen Flow machen
Manchmal willst du auf einen Compose-Zustand reagieren wie auf einen Datenstrom – entprellen, kombinieren, sammeln. Genau das macht snapshotFlow. Ich zeige dir das an der häufigsten Aufgabe: mehr laden, wenn der Nutzer ans Listenende scrollt.