updateTransition으로 동작 조정하기

When several properties should change as one state shifts, you want them in sync. updateTransition coordinates many animations from a single state. ✨

Create a transition by handing updateTransition your current state. Compose watches it and drives every child animation when the state changes.

Ask the transition for each value with animateDp, animateColor, and friends. You give a lambda mapping each state to its target.

Add as many child animations as you like from the same transition. Size, color, and corner radius all change together from one boolean.

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.

Read each animated value just like normal state and apply it. The whole element morphs smoothly as the transition runs every frame.

Each child can have its own transitionSpec. Make color snap fast while size eases slowly, all still triggered by the same state change.

Your state can be an enum, not just a boolean. Map each case to a target and the transition animates between any of them.

The transition exposes currentState and targetState. You can check whether motion is still in flight or has settled on the goal.

Pick updateTransition when one event should drive a set of coordinated changes, like expanding a card while its color and elevation shift in unison. 🎬

Grouping animations under one transition is cleaner and easier to reason about than juggling several independent animate*AsState values.

What is the main benefit of updateTransition over separate animate*AsState calls?

You learned updateTransition: derive several animated values from one state so they move in perfect sync, each with its own timing. 🎉