How to make FlipCard animation in Jetpack compose

user_13252981 0
Viewed 2545

I have an existing app where I have implemented FlipCard animation like below using Objectanimator in XML. If I click on a card it flips horizontally. But now I want to migrate it to jetpack compose. So is it possible to make flip card animation in jetpack compose?

https://i.stack.imgur.com/pU4rt.gif

Update

Finally, I have ended up with this. Though I don't know if it is the right way or not but I got exactly what I wanted. If there is any better alternative you can suggest. Thank you.

Method 1: Using animate*AsState

    @Composable
    fun FlipCard() {
        
        var rotated by remember { mutableStateOf(false) }

        val rotation by animateFloatAsState(
            targetValue = if (rotated) 180f else 0f,
            animationSpec = tween(500)
        )

        val animateFront by animateFloatAsState(
            targetValue = if (!rotated) 1f else 0f,
            animationSpec = tween(500)
        )

        val animateBack by animateFloatAsState(
            targetValue = if (rotated) 1f else 0f,
            animationSpec = tween(500)
        )

        val animateColor by animateColorAsState(
            targetValue = if (rotated) Color.Red else Color.Blue,
            animationSpec = tween(500)
        )

        Box(
            Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Card(
                Modifier
                    .fillMaxSize(.5f)
                    .graphicsLayer {
                        rotationY = rotation
                        cameraDistance = 8 * density
                    }
                    .clickable {
                        rotated = !rotated
                    },
                backgroundColor = animateColor
            )
            {
                Column(
                    Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {

                    Text(text = if (rotated) "Back" else "Front", 
                         modifier = Modifier
                        .graphicsLayer {
                            alpha = if (rotated) animateBack else animateFront
                            rotationY = rotation
                        })
                }

            }
        }
    }

Method 2: Encapsulate a Transition and make it reusable. You will get the same output as method 1. But it is reusable and for the complex case.


    enum class BoxState { Front, Back }

    @Composable
    fun AnimatingBox(
        rotated: Boolean,
        onRotate: (Boolean) -> Unit
    ) {
        val transitionData = updateTransitionData(
            if (rotated) BoxState.Back else BoxState.Front
        )
        Card(
            Modifier
                .fillMaxSize(.5f)
                .graphicsLayer {
                    rotationY = transitionData.rotation
                    cameraDistance = 8 * density
                }
                .clickable { onRotate(!rotated) },
            backgroundColor = transitionData.color
        )
        {
            Column(
                Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = if (rotated) "Back" else "Front", 
                     modifier = Modifier
                    .graphicsLayer {
                        alpha =
                            if (rotated) transitionData.animateBack else transitionData.animateFront
                        rotationY = transitionData.rotation
                    })
            }

        }
    }


    private class TransitionData(
        color: State<Color>,
        rotation: State<Float>,
        animateFront: State<Float>,
        animateBack: State<Float>
    ) {
        val color by color
        val rotation by rotation
        val animateFront by animateFront
        val animateBack by animateBack
    }


    @Composable
    private fun updateTransitionData(boxState: BoxState): TransitionData {
        val transition = updateTransition(boxState, label = "")
        val color = transition.animateColor(
            transitionSpec = {
                tween(500)
            },
            label = ""
        ) { state ->
            when (state) {
                BoxState.Front -> Color.Blue
                BoxState.Back -> Color.Red
            }
        }
        val rotation = transition.animateFloat(
            transitionSpec = {
                tween(500)
            },
            label = ""
        ) { state ->
            when (state) {
                BoxState.Front -> 0f
                BoxState.Back -> 180f
            }
        }

        val animateFront = transition.animateFloat(
            transitionSpec = {
                tween(500)
            },
            label = ""
        ) { state ->
            when (state) {
                BoxState.Front -> 1f
                BoxState.Back -> 0f
            }
        }
        val animateBack = transition.animateFloat(
            transitionSpec = {
                tween(500)
            },
            label = ""
        ) { state ->
            when (state) {
                BoxState.Front -> 0f
                BoxState.Back -> 1f
            }
        }

        return remember(transition) { TransitionData(color, rotation, animateFront, animateBack) }
    }

Output

enter image description here

android-jetpack-compose android-animation android
1 Answers
setContent {
  ComposeAnimationTheme {
    Surface(color = MaterialTheme.colors.background) {
      var state by remember {
        mutableStateOf(CardFace.Front)
      }
      FlipCard(
          cardFace = state,
          onClick = {
            state = it.next
          },
          axis = RotationAxis.AxisY,
          back = {
            Text(text = "Front", Modifier
                .fillMaxSize()
                .background(Color.Red))
          },
          front = {
            Text(text = "Back", Modifier
                .fillMaxSize()
                .background(Color.Green))
          }
      )
    }
  }
}

enum class CardFace(val angle: Float) {
  Front(0f) {
    override val next: CardFace
      get() = Back
  },
  Back(180f) {
    override val next: CardFace
      get() = Front
  };

  abstract val next: CardFace
}

enum class RotationAxis {
  AxisX,
  AxisY,
} 

@ExperimentalMaterialApi
@Composable
fun FlipCard(
    cardFace: CardFace,
    onClick: (CardFace) -> Unit,
    modifier: Modifier = Modifier,
    axis: RotationAxis = RotationAxis.AxisY,
    back: @Composable () -> Unit = {},
    front: @Composable () -> Unit = {},
) {
  val rotation = animateFloatAsState(
      targetValue = cardFace.angle,
      animationSpec = tween(
          durationMillis = 400,
          easing = FastOutSlowInEasing,
      )
  )
  Card(
      onClick = { onClick(cardFace) },
      modifier = modifier
          .graphicsLayer {
            if (axis == RotationAxis.AxisX) {
              rotationX = rotation.value
            } else {
              rotationY = rotation.value
            }
            cameraDistance = 12f * density
          },
  ) {
    if (rotation.value <= 90f) {
      Box(
          Modifier.fillMaxSize()
      ) {
        front()
      }
    } else {
      Box(
          Modifier
              .fillMaxSize()
              .graphicsLayer {
                if (axis == RotationAxis.AxisX) {
                  rotationX = 180f
                } else {
                  rotationY = 180f
                }
              },
      ) {
        back()
      }
    }
  }
}

Check this article. https://fvilarino.medium.com/creating-a-rotating-card-in-jetpack-compose-ba94c7dd76fb.

user_73415280
Related