Animating Composables Made Easy

Animations in android hasn't always been straight forward to implement. The introduction of jetpack compose makes animations a bit more enjoyable and easier to implement.

In this article we'll be looking at the animateValueAsState api. Values currently supported are Color,Float,Dp,Rect,Int,Inoffset and Instize.

Let's take a look at animating color states for this series. We'll be creating something like this

// --> 1

val Purple = Color(0xFF6200EE)
val Orange = Color(0xFFFF5722)
val White =  Color(0xFFFFFFFF)
val Blue =  Color(0xFF4052B8)
val Green =  Color(0xFF4CAF50)
val Yellow =  Color(0xFFFFEB3B)



// --> 2
 var currentColor by remember {
        mutableStateOf(White)
    }

// --> 3
    val colors by remember {
        mutableStateOf(listOf(White, Orange, Purple200, Blue, Green,Yellow))
    }

val cardBackground by animateColorAsState(targetValue = currentColor)


    Box(modifier = Modifier.fillMaxSize()) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .height(200.dp),
            onClick = { 
                // --> 4
                currentColor = colors.random()
             },
            backgroundColor = cardBackground,
            elevation = 3.dp, indication = rememberRipple()
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "Click to Change Color", modifier = Modifier.align(Alignment.Center))
            }
        }

    }

1. We declare the colors we want to set the box as we click it.
2. Animate*AsState requires a target state that is mutable. NB : Animate*AsState in it self needs immutable
3. Make a list from all defined colors
4. Assign currentColor a new value on click

Happy Coding, See you in the next series !
Code Link