Understanding animate*AsState API in Jetpack Compose

animate*AsState is the simplest animation API in Android Jetpack Compose. Today, we will learn how to implement it with the help of examples.

Prerequisites:

• Basics of Jetpack Compose
• Column, Row, and Box
• State in Jetpack Compose

For this article, let’s animate a box.

@Composable
fun MyUI() {

    Box(
        modifier = Modifier
            .size(size = 56.dp)
            .background(color = Color.Magenta)
    ) {
    }
}

It looks like this:

animate*AsState provides several functions. They are:

• animateFloatAsState
• animateColorAsState
• animateDpAsState
• animateSizeAsState
• animateOffsetAsState
• animateRectAsState
• animateIntAsState
• animateIntOffsetAsState
• animateIntSizeAsState

animateFloatAsState:

It animates a float value. We just need to pass the end (target) value and the API starts the animation from the current value to the end value.

Let us animate the size of the Box using the scale modifier. The animateFloatAsState() function takes four parameters.

@Composable
fun animateFloatAsState(
    targetValue: Float,
    animationSpec: AnimationSpec<Float> = defaultAnimation,
    visibilityThreshold: Float = 0.01f,
    finishedListener: ((Float) -> Unit)? = null
): State<Float> {
}

targetValue and animationSpec are used most frequently. targetValue is the end value and animationSpec is for customizing the animation.

@Composable
fun MyUI() {

    var size by remember {
        mutableStateOf(0.5f)
    }

    val animateScale by animateFloatAsState(targetValue = size)

    Box(
        modifier = Modifier
            .scale(scale = animateScale)
            .size(size = 56.dp)
            .background(color = Color.Magenta)
            .clickable {
                size = if (size == 2f) 0.5f else 2f
            }
    ) {
    }
}

Output:

We have created two variables – size and animateScale. We have assigned the size to targetValue. In the clickable block, we are flipping its value. Whenever the size is changed, targetValue will be changed and animateFloatAsState starts the animation. As we have assigned animateScale to the scale parameter, the size of the box will be scaled up or down with a nice animation.

If you are not aware of by and remember function, read state management in Jetpack Compose.

We can customize the animation using animationSpec parameter. Jetpack Compose provides several animationSpec functions. Let us change the animation duration using the tween() function.

@Composable
fun MyUI() {

    var size by remember {
        mutableStateOf(0.5f)
    }

    val animateScale by animateFloatAsState(
        targetValue = size,
        animationSpec = tween(durationMillis = 3000)
    )

    Box(
        modifier = Modifier
            .scale(scale = animateScale)
            .size(size = 56.dp)
            .background(color = Color.Magenta)
            .clickable {
                size = if (size == 2f) 0.5f else 2f
            }
    ) {
    }
}

Output:

We can follow the same process for other data types.

animateColorAsState:

Use it to animate colors.

@Composable
fun MyUI() {

    var color by remember {
        mutableStateOf(Color.Red)
    }

    val animateColor by animateColorAsState(
        targetValue = color,
        animationSpec = tween(durationMillis = 3000)
    )

    Box(
        modifier = Modifier
            .size(size = 56.dp)
            .background(color = animateColor)
            .clickable {
                color = if (color == Color.Red) Color.Yellow else Color.Red
            }
    ) {
    }
}

Output:

animateDpAsState:

It animates Dp values.

@Composable
fun MyUI() {

    var sizeDp by remember {
        mutableStateOf(36.dp)
    }

    val animateSize by animateDpAsState(
        targetValue = sizeDp,
        animationSpec = tween(durationMillis = 3000)
    )

    Box(
        modifier = Modifier
            .size(size = animateSize)
            .background(color = Color.Red)
            .clickable {
                sizeDp = if (sizeDp == 36.dp) 64.dp else 36.dp
            }
    ) {
    }
}

Output:

Similarly, we can animate other data types like Size, Offset, Rect, Int, IntOffset, and IntSize.

This is about animate*AsState API in Android Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.