Making Your UI Pop: Explore Jetpack Compose Animations

You can expect to find clean, elegant animations throughout Jetpack Compose, a modern, powerful UI toolkit,” it adds. “Animations bring your app to life and help you build experiences that are not only a delight to use but responsive.”

Photo by Mika Baumeister on Unsplash

Bonus Content: If you’re interested to learn about navigation in Jetpack Compose, check out our Beginner’s Guide to Jetpack Compose Navigation for seamless, intuitive user flows with practical, concise examples!

1)Crossfade Animation: Smoothly Transitioning Views

The Crossfade animation allows you to move from one view to another with an absolutely gorgeous, gradual fade between views.

Code:

@Composable  
fun CrossfadeExample() {  
    val showFirst: MutableState<Boolean> = remember { mutableStateOf(true) }  

    Column(horizontalAlignment = Alignment.CenterHorizontally) {  
        Button(onClick = { showFirst = !showFirst }) {  
            Text("Toggle")  
        }  

        Spacer(modifier = Modifier.height(16.dp))  

        Crossfade(targetState = showFirst) { state ->  
            if (state) {  
                Text("First Text", color = "Blue")  
            } else {  
                Text("Second Text", color = "Red")  
            }  
        }  
    }  
}

Explanation:

1. A button toggles a Boolean state called showFirst.
2. Depending on this state, a change from “First Text” (in blue) to “Second Text” (in red) will update the displayed content within the Crossfade component.
3. This animation makes transitioning between different UI states visually appealing.

2)Smooth Rotation Animation: A Touch of Movement

Adding rotation can give your UI a dynamic flair, making the experience feel fun and engaging.

Code:

@Composable  
fun SmoothRotationAnimation() {  
    var startAnimation by remember { mutableStateOf(false) }  

    val animatedValue by animateFloatAsState(  
        targetValue = if (startAnimation) 360f else 0f,  
        animationSpec = tween(durationMillis = 2000, easing = LinearEasing)  
    )  

    Column(horizontalAlignment = Alignment.CenterHorizontally) {  
        Text(  
            text = "Smooth Rotation Animation",  
            modifier = Modifier  
                .padding(16.dp)  
                .clickable { startAnimation = !startAnimation }  
                .rotate(animatedValue)  
                .background(Color.Gray)  
                .padding(16.dp)  
        )  
    }  
}

Explanation:
1. Clicking the text toggles a Boolean state (startAnimation), determining if the rotation should start.

2. The animateFloatAsState gradually animates the angle to rotate the text by 360 degrees.

3.LinearEasing provides consistent speed throughout the 2-second animation.

3)Expandable Box: Adding a Little Bounce

An expandable box with a springy, bouncy animation adds interactivity and a playful touch.

Code:

@Composable  
fun ExpandableBox() {  
    var isExpanded by remember { mutableStateOf(false) }  

    val boxHeight by animateDpAsState(  
        targetValue = if (isExpanded) 200.dp else 50.dp,  
        animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy)  
    )  

    Box(  
        modifier = Modifier  
            .padding(16.dp)  
            .height(boxHeight)  
            .fillMaxWidth()  
            .background(Color.Cyan)  
            .clickable { isExpanded = !isExpanded }  
    ) {  
        Text("Tap to expand or collapse", Modifier.padding(8.dp))  
    }  
}

4)Color-Changing Button: Visual Feedback at Its Best

A button that changes color provides clear visual feedback for user interactions.

Code:

@Composable  
fun ColorChangingButton() {  
    var isClicked by remember { mutableStateOf(false) }  

    val backgroundColor by animateColorAsState(  
        targetValue = if (isClicked) Color.Green else Color.Red,  
        animationSpec = tween(durationMillis = 500)  
    )  

    Button(  
        onClick = { isClicked = !isClicked },  
        colors = ButtonDefaults.buttonColors(backgroundColor),  
        modifier = Modifier.padding(16.dp)  
    ) {  
        Text("Click me")  
    }  
}

Explanation:
1)Clicking the button toggles the isClicked state, switching the color from red to green or vice versa.

2)animateColorAsState smoothly transitions the color within 500 milliseconds.
3)The button provides immediate visual feedback to users, making interactions more engaging.