DEV Community

Isaac Akakpo
Isaac Akakpo

Posted on • Updated on

Animating Position Changes

We'll be looking at how to animate position changes using Dp in this series.

Image description

Let's define the card position as Enum's

//

enum class CardPosition {
    IS_LEFT,
    IS_RIGHT
}
Enter fullscreen mode Exit fullscreen mode

We'll be using a BoxWithConstraints for this mainly it returns as the current size of the box where we could use the offset modifier to set the current position

BoxWithConstraints(
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp)
            .border(width = 2.dp, shape = RoundedCornerShape(15), color = Blue)
            .background(color = Color.Transparent, shape = RoundedCornerShape(15))
    ) {

      // --> 1
        var currentState by remember { mutableStateOf(CardPosition.IS_LEFT) }
// --> 2
        val transition = updateTransition(currentState, label = "First Trans")
// --> 3
        val color by transition.animateColor(transitionSpec = {
            tween(800, easing = LinearOutSlowInEasing)
        }, label = "") {
            when (it) {
                CardPosition.IS_RIGHT ->
                    Blue
                else -> Green
            }
        }

// --> 4
        val xOffset by transition.animateDp(
            transitionSpec = {
                tween(800, easing = LinearOutSlowInEasing)


            }, label = "xOffset"
        ) { state ->
            when (state) {
                CardPosition.IS_LEFT -> 0.dp
                CardPosition.IS_RIGHT -> this.maxWidth - 165.dp
            }
        }




        Card(
            elevation = 3.dp,
            shape = RoundedCornerShape(100),
            backgroundColor = color,
            onClick = {
                currentState = if (currentState == CardPosition.IS_LEFT) {
                    CardPosition.IS_RIGHT
                } else {
                    CardPosition.IS_LEFT

                }
            }, indication = rememberRipple(),
            modifier = Modifier
// --> 5
                .offset(x = xOffset, 0.dp)
                .padding(vertical = 15.dp, horizontal = 5.dp)
                .width(150.dp)
        ) {
            Text(
                text = if (currentState == CardPosition.IS_LEFT) "Move To Right" else "Move To Left",
                textAlign = TextAlign.Center,
                color = White,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 20.dp, vertical = 5.dp)
            )
        }

    }
Enter fullscreen mode Exit fullscreen mode
  1. We set the current position of the Card.
  2. Use the updateTransition.. animations api to hold the current position.
    Learn more about updateTransition

  3. Since we want to change the color on whether the card is at the right or left we declare a color variable update the current color accordingly

  4. We need an xOffSet to determine and set the current position of the card.

  5. Finally we set this using the offset modifier in Dp. (NB: This could also be done with IntOffSet{} for int values)

Link to Source Code

Top comments (0)