Jetpack Compose 10: Animation and Transitions with Examples

Animations breathe life into your UI. Jetpack Compose offers powerful APIs to animate visibility, content, shapes, and transformations – all declaratively. This article provides a comprehensive guide to implementing various animation techniques in Jetpack Compose, enhancing your Android app's user experience.

1. AnimatedVisibility – Show/Hide with Smooth Motion

The AnimatedVisibility composable allows you to animate the visibility of composables, creating smooth fade, slide, expand, or shrink effects. It's perfect for showing or hiding UI elements in response to user interactions or state changes.

@Composable
fun AnimatedVisibilityExample() {
    var visible by remember { mutableStateOf(true) }
    Column {
        Button(onClick = { visible = !visible }) {
            Text(if (visible) "Hide" else "Show")
        }
        AnimatedVisibility(visible) {
            Text("This text animates in/out")
        }
    }
}

This snippet demonstrates a simple AnimatedVisibility example where a text composable fades in and out when a button is clicked.

2. AnimatedContent – Transition Between States

AnimatedContent enables you to animate the transition between different states of a composable. This is useful for animating changes in text, icons, or other UI elements as the underlying data changes.

@Composable
fun AnimatedContentExample() {
    var count by remember { mutableStateOf(0) }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Button(onClick = { count++ }) {
            Text("Increase")
        }
        AnimatedContent(targetState = count) { targetCount ->
            Text("Count: $targetCount")
        }
    }
}

In this example, the AnimatedContent composable animates the change in the displayed count value whenever the "Increase" button is pressed.

3. MotionLayout – Constraint-Based Animations

For complex keyframe-based animations, MotionLayout provides a powerful and flexible solution. It allows you to define animations based on constraints, making it easy to create intricate and visually appealing effects.

@Composable
fun MotionLayoutExample() {
    val progress = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        progress.animateTo(1f, animationSpec = tween(2000))
    }
    MotionLayout(
        start = ConstraintSet {
            val box = createRefFor("box")
            constrain(box) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
        },
        end = ConstraintSet {
            val box = createRefFor("box")
            constrain(box) {
                bottom.linkTo(parent.bottom)
                end.linkTo(parent.end)
            }
        },
        progress = progress.value
    ) {
        Box(
            Modifier
                .size(60.dp)
                .background(Color.Red)
                .layoutId("box")
        )
    }
}

This MotionLayout example demonstrates how to animate a red box moving from the top-left corner to the bottom-right corner of the screen.

4. Modifier.graphicsLayer – Apply 2D Transforms

The Modifier.graphicsLayer allows you to apply 2D transformations, such as rotation, scale, and translation, to composables. This is useful for creating subtle animations and visual effects.

@Composable
fun GraphicsLayerExample() {
    var rotation by remember { mutableStateOf(0f) }
    LaunchedEffect(Unit) {
        while (true) {
            delay(16)
            rotation += 2f
        }
    }
    Box(
        modifier = Modifier
            .size(100.dp)
            .graphicsLayer(rotationZ = rotation)
            .background(Color.Green)
    )
}

This example showcases how to rotate a green box continuously using the Modifier.graphicsLayer.

5. Modifier.drawBehind – Draw Custom Backgrounds

With Modifier.drawBehind, you can draw custom shapes and backgrounds behind composables. This enables you to create unique visual effects and add depth to your UI.

@Composable
fun DrawBehindExample() {
    Box(
        Modifier
            .size(120.dp)
            .drawBehind {
                drawCircle(Color.Red, radius = size.minDimension / 2)
            }
    ) {
        Text("Inside Circle", modifier = Modifier.align(Alignment.Center))
    }
}

This example demonstrates how to draw a red circle behind a text composable using Modifier.drawBehind.

6. AnimatedVectorDrawable – Animate Icons

AnimatedVectorDrawable allows you to animate vector drawables, creating dynamic and engaging icons. This is a great way to add visual interest to your app's UI.

@Composable
fun AnimatedVectorExample() {
    val context = LocalContext.current
    val animatedDrawable = remember {
        AnimatedVectorDrawableCompat.create(
            context,
            R.drawable.animated_check
        )
    }
    AndroidView(factory = { 
        ImageView(it).apply {
            setImageDrawable(animatedDrawable)
            animatedDrawable?.start()
        }
    })
}

This example showcases how to animate a checkmark icon using an AnimatedVectorDrawable.

7. CircularReveal (Custom) – Reveal with Circular Effect

While Jetpack Compose doesn't offer a native circular reveal animation, you can implement it using custom clipping with Canvas. This allows you to create a visually appealing reveal effect.

@Composable
fun CircularRevealExample() {
    val radius = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        radius.animateTo(500f, tween(1000))
    }
    Canvas(modifier = Modifier.fillMaxSize()) {
        clipPath(Path().apply {
            addOval(Rect(center = Offset(size.width / 2, size.height / 2), radius = radius.value))
        }) {
            drawRect(Color.Cyan)
        }
    }
}

This example demonstrates a custom implementation of a circular reveal animation using Canvas and clipping.

In conclusion, Jetpack Compose provides a rich set of tools for creating animations and transitions in your Android apps. By leveraging AnimatedVisibility, AnimatedContent, MotionLayout, and other techniques, you can enhance your UI and provide a more engaging user experience.