如何在Jetpack Compose中制作FlipCard动画

Question

我有一个已存在的应用程序，我在其中使用XML中的Objectanimator实现了以下FlipCard动画。如果我点击卡片，它会水平翻转。但现在我想将其迁移到Jetpack Compose。所以在Jetpack Compose中是否可以制作FlipCard动画？

更新:

最终，我得到了这个结果。虽然我不知道它是否正确，但我得到了我想要的结果。如果你有更好的替代方案可以建议一下。谢谢。

方法1：使用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
                        })
                }

            }
        }
    }

方法2：封装一个过渡并使其可重用。 您将获得与方法1相同的输出。但它是可重复使用的，适用于复杂情况。

    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) }
    }

输出

- Rafiul

---

请查看此链接：https://medium.com/geekculture/how-to-add-card-flip-animation-in-the-android-app-3060afeadd45。 - Elango

我已经使用 ObjectAnimator 实现了翻转卡片。但是现在我正在寻找 Jetpack Compose 的解决方案。 - Rafiul

你的两种方法看起来都不错，.graphicsLayer 很好用。我只是在 90 度时切换颜色，而不是连续动画改变它，以避免紫色阴影。为什么 const val DefaultCameraDistance = 8.0f 不够好呢？ - pommy

默认的相机距离对于我的卡片大小来说有点烦人。在旋转时，它覆盖了整个屏幕宽度。因此，我通过密度乘以一些值来增加它，并在一些不同的设备上进行了测试。对我来说，它看起来很完美。由于这是一个透视问题，所以它也取决于您的卡片的高度和宽度。您可以使用适合您要求的内容。不过，我对谷歌的建议感到困惑。 - Rafiul

当视图大小仅为8或在我的情况下为8*density时，“大于视图大小”的含义是什么？他们建议——如果更改了rotationX或rotationY属性并且此视图很大（超过屏幕的一半大小），则建议始终使用比该视图的高度（X轴旋转）或宽度（Y轴旋转）更大的摄像机距离。 - Rafiul

Answer 1

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()
      }
    }
  }
}

请查看此文章：https://fvilarino.medium.com/creating-a-rotating-card-in-jetpack-compose-ba94c7dd76fb，该文章讲解了如何在Jetpack Compose中创建旋转卡片。

- Vova