Visual Animations in Jetpack Compose

Jetpack Compose provides a declarative animation system that enables smooth transitions between UI states. With built in APIs, developers can animate composable visibility, content changes, size adjustments, and property transitions. These animations enhance user experience while maintaining optimal performance. By the end of this lesson, you will be able to:

• Use AnimatedVisibility to animate composable appearance and disappearance.
• Apply Crossfade for smooth transitions between different UI states.
• Use AnimatedContent to animate dynamic content updates.
• Apply animate*AsState functions for property based animations.
• Use animateContentSize to handle automatic size change animations.

AnimatedVisibility for Appearance and Disappearance

AnimatedVisibility animates the entry and exit transitions of a composable. By default, it applies a fade in and expansion effect when appearing and a fade out and shrink effect when disappearing. Custom transitions can be defined using EnterTransition and ExitTransition:

@Composable
fun AnimatedVisibilityExample() {
    var isVisible by remember { mutableStateOf(true) }

    Column {
        Button(onClick = { isVisible = !isVisible }) {
            Text("Toggle Visibility")
        }
        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn() + expandVertically(),
            exit = fadeOut() + shrinkVertically()
        ) {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Blue)
            )
        }
    }
}

The Box fades in and expands when appearing, and fades out while shrinking when disappearing. The + operator combines multiple transition effects into a single compound animation.

Crossfade for State Transitions

Crossfade animates the transition between two composables using a fade effect. It is well suited for tab navigation and screen or component transitions:

@Composable
fun CrossfadeExample() {
    var selectedScreen by remember { mutableStateOf("Home") }

    Column {
        Row {
            Button(onClick = { selectedScreen = "Home" }) {
                Text("Home")
            }
            Button(onClick = { selectedScreen = "Profile" }) {
                Text("Profile")
            }
        }
        Crossfade(targetState = selectedScreen) { screen ->
            when (screen) {
                "Home" -> Text("Home Screen", fontSize = 24.sp)
                "Profile" -> Text("Profile Screen", fontSize = 24.sp)
            }
        }
    }
}