State Based Animations in Jetpack Compose

State Based Animations in Jetpack Compose

1. Animate Float As State 

MainActivity

Copy this code →

package com.codingbihar.jetpackcomposeskill

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.ui.Modifier
import com.codingbihar.jetpackcomposeskill.ui.theme.JetpackComposeSkillTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            JetpackComposeSkillTheme {
            StateBasedAnimation()
            }
          }
        }
    }

Animate Float as State Example

Used when you want to animate any property represented by a Float, such as opacity, scaling factors, or text size.

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...


@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var floatValue by remember { mutableStateOf(false) }
        var sp by remember { mutableStateOf("20") }
        val size by animateFloatAsState(
            targetValue = if (floatValue) 30f else 20f,
            animationSpec = tween(durationMillis = 500),
            label = ""
        )
        Box(modifier.clickable {
            floatValue = !floatValue
            sp = if (floatValue) 30.toString() else 20.toString()
        }
        ) {
            Text("State Based Animation ${sp}f", fontSize = size.sp)
        }
    }
}

Animate Color As State

Useful when you want to animate the color of a UI element.

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...

@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        var color by remember { mutableStateOf(false) }

        // Animate the text color of the box
        val textColor by animateColorAsState(
            targetValue = if (color) Color.Green else Color.Red,
            animationSpec = tween(durationMillis = 500),
            label = "" 
        )
        Box(modifier.clickable {
            color = !color
        }
        ) {
             Text("State Based Animation", color = textColor)
        }
    }
}

Animate Dp As State

Commonly used to animate sizes, padding, margins, or dimensions.

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...

@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        var dpChange by remember { mutableStateOf(false) }

        // Animate the background color of the box
        val dpSize by animateDpAsState(
            targetValue = if (dpExpanded) 400.dp else 200.dp,
            animationSpec = tween(durationMillis = 500),
            label = "" 
        )
        Box(modifier.background(color = MaterialTheme.colorScheme.surfaceTint)
            .size(dpSize)
            .clickable {
            dpChange = !dpChange
        }
        ) {
             Text("State Based Animation")
        }
    }
}

Animate Size As State

Useful for animating the size of elements like Box or other composables.

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...

@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        var dpChanged by remember { mutableStateOf(false) }

        // Animate the background color of the box
        val dpSize by animateDpAsState(
            targetValue = if (dpExpanded) 400.dp else 200.dp,
            animationSpec = tween(durationMillis = 500),
            label = "" 
        )
        Box(modifier.background(color = MaterialTheme.colorScheme.surfaceTint)
            .size(dpSize)
            .clickable {
            dpChanged = !dpChanged
        }
        ) {
            Text("State Based Animation")
        }
    }
}

Animate Int As State

Useful for properties like integer-based sizes or indices.

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...

@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        var sizeExpanded by remember { mutableStateOf(false) }

        // Animate the size of the box using an Int value
        val size by animateIntAsState(
            targetValue = if (sizeExpanded) 400 else 200,
            animationSpec = tween(durationMillis = 500),
            label = "" 
        )
        Box(modifier.background(color = MaterialTheme.colorScheme.surfaceTint)
            .size(size.dp)
            .clickable {
                sizeExpanded = !sizeExpanded
            }
        ) {
             Text("State Based Animation")
        }
    }
}

Also Read

Navigation with Jetpack Compose

Navigation is a method or technique used to allow users to move between different parts of an application. In Jetpack Compose, the navigation component helps manage and implement this navigation, ensuring a consistent and efficient user experience.....

Text Clock in Android Jetpack Compose

A text clock is a type of clock that displays the time using digits, as opposed to an analog clock, which uses rotating hands to indicate the time. Digital clocks typically show hours, minutes, and sometimes seconds in numerical form, usually on an LED or LCD screen.......