updateTransition für koordinierte Bewegungen
Animieren Sie mehrere Werte aus einem State heraus.
updateTransition für koordinierte Bewegungen ist eine kostenlose Jetpack Compose 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 Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Animate Many Values Together
When several properties should change as one state shifts, you want them in sync. updateTransition coordinates many animations from a single state. ✨
Start From a State
Create a transition by handing updateTransition your current state. Compose watches it and drives every child animation when the state changes.
val transition = updateTransition(targetState = expanded)Derive Animated Values
Ask the transition for each value with animateDp, animateColor, and friends. You give a lambda mapping each state to its target.
val size by transition.animateDp { if (it) 200.dp else 80.dp }Many Values, One Source
Add as many child animations as you like from the same transition. Size, color, and corner radius all change together from one boolean.
val corner by transition.animateDp { if (it) 0.dp else 24.dp }Perfectly Coordinated
Because they share one transition, the values stay in lockstep. There is no risk of size finishing before color, which can happen with separate animateAsState calls.
Use the Values in Modifiers
Read each animated value just like normal state and apply it. The whole element morphs smoothly as the transition runs every frame.
Box(Modifier.size(size).clip(RoundedCornerShape(corner)))Per-Value Timing
Each child can have its own transitionSpec. Make color snap fast while size eases slowly, all still triggered by the same state change.
transition.animateDp(transitionSpec = { tween(600) }) { ... }More Than Two States
Your state can be an enum, not just a boolean. Map each case to a target and the transition animates between any of them.
enum class BoxState { Collapsed, Half, Expanded }Inspect Current and Target
The transition exposes currentState and targetState. You can check whether motion is still in flight or has settled on the goal.
When to Reach for It
Pick updateTransition when one event should drive a set of coordinated changes, like expanding a card while its color and elevation shift in unison. 🎬
Lighter Than Many Calls
Grouping animations under one transition is cleaner and easier to reason about than juggling several independent animate*AsState values.
Quick Check
What is the main benefit of updateTransition over separate animate*AsState calls?
Recap: One State, Many Motions
You learned updateTransition: derive several animated values from one state so they move in perfect sync, each with its own timing. 🎉
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
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „updateTransition für koordinierte Bewegungen“ kostenlos?
Ja — der vollständige Text von „updateTransition für koordinierte Bewegungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „updateTransition für koordinierte Bewegungen“?
Animieren Sie mehrere Werte aus einem State heraus. Du übst Jetpack Compose 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 Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose 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 „updateTransition für koordinierte Bewegungen“?
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 Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose 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
- animate*AsState für einfache Tweens
- AnimatedVisibility und Crossfade
- updateTransition für koordinierte Bewegungen
- Gestengesteuerte Animationen