Why Animations Matter
Motion that guides and delights users.
Motion with a Purpose
Animations are more than eye candy. In a great Android app, motion guides attention, explains what changed, and makes the UI feel responsive and alive.
In this course you'll learn Jetpack Compose's animation APIs, from the one-line animate*AsState helpers to AnimatedVisibility, transitions, and physics-based springs.
This first lesson is about why and when to animate, so your motion always has a job to do.
Compose Animates Declaratively
In Compose you don't manually start and stop animations frame by frame. Instead you describe a target value, and Compose smoothly animates toward it whenever that value changes.
Here a box's color is driven by a single boolean state. Tapping flips the state and the color glides automatically.
@Composable
fun ColorBox() {
var selected by remember { mutableStateOf(false) }
val color by animateColorAsState(
targetValue = if (selected) Color.Green else Color.Gray,
label = "box-color"
)
Box(
Modifier
.size(120.dp)
.background(color)
.clickable { selected = !selected }
)
}