DEV Community

Isaac Akakpo
Isaac Akakpo

Posted on • Edited on

2 2

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

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay