updateTransition для согласованного движения
Анимируйте несколько значений из одного состояния.
«updateTransition для согласованного движения» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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. 🎉
Часто задаваемые вопросы
Урок «updateTransition для согласованного движения» бесплатный?
Да — полный текст урока «updateTransition для согласованного движения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «updateTransition для согласованного движения»?
Анимируйте несколько значений из одного состояния. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «updateTransition для согласованного движения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- animate*AsState для простых интерполяций
- AnimatedVisibility и Crossfade
- updateTransition для согласованного движения
- Анимации на основе жестов