animate*AsState untuk Tween Sederhana

Compose can animate changes for you. The simplest tool is the animate*AsState family, which smoothly moves a value from old to new. ✨

When your target value changes, animateDpAsState returns a State that glides toward it over a few frames instead of jumping.

The animated value is just a State you read with by. Use it in a Modifier and the UI follows the animation every frame.

There is one per type: animateFloatAsState, animateColorAsState, animateDpAsState, and more. Pick the one matching the value you want to tween.

Use animateColorAsState to fade between colors. Toggle a boolean and watch the background shift smoothly from one tint to another. 🎨

For fade in and out, animate a float and feed it to alpha. A value of 0f is invisible, 1f is fully opaque.

Pass an animationSpec to control timing. A tween lets you set the duration in milliseconds and an easing curve.

Swap in a spring spec for natural, physics-based motion. Tune dampingRatio and stiffness to add a little playful bounce.

You never call start or stop. When the target value changes during recomposition, the animation restarts toward the new goal automatically.

Default easing makes motion feel alive by speeding up then slowing down. Easing curves like FastOutSlowInEasing avoid robotic, constant-speed movement.

Need to react when motion ends? Pass a finishedListener lambda, which fires once with the final value after the animation settles.

Which spec gives motion a natural, bouncy physics feel?

You learned animate*AsState: change a target, read the animated State, and pick tween or spring. It is the quickest way to add smooth single-value motion. 🎉