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
Room-Migrationen – das Schema ändern, ohne Nutzerdaten zu verlieren
Eine neue Spalte in der Entity, und beim nächsten Start ist der Spielstand weg – weil fallbackToDestructiveMigration die Datenbank einfach löscht. So machst du es richtig, inklusive Test.
stateIn und shareIn – aus einem kalten Flow wird geteilter Zustand
Jeder Sammler eines kalten Flows startet die Arbeit neu – zwei Beobachter, zwei Datenbankabfragen. stateIn und shareIn machen daraus einen Strom, den sich alle teilen, samt aktuellem Wert und Abschalten bei Inaktivität.
viewModelScope – Coroutinen, die mit dem Bildschirm verschwinden
Eine Coroutine, die nach dem Schließen des Bildschirms weiterläuft, schreibt in ein ViewModel, das niemand mehr sieht – und hält im schlimmsten Fall die ganze Activity im Speicher. viewModelScope beendet sie automatisch.