如何在 Jetpack compose 中制作 FlipCard 动画答案

【问题标题】：How to make FlipCard animation in Jetpack compose如何在 Jetpack compose 中制作 FlipCard 动画
【发布时间】：2021-06-19 07:27:07
【问题描述】：

我有一个现有的应用程序，我在其中使用 XML 中的 Objectanimator 实现了如下所示的 FlipCard 动画。如果我点击一张卡片，它会水平翻转。但现在我想将它迁移到 jetpack compose。那么jetpack compose可以制作翻牌动画吗？

更新

最后，我结束了这个。虽然我不知道这是否正确，但我得到了我想要的。如果有更好的选择，您可以提出建议。谢谢。

方法一：使用 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：封装一个Transition，使其可重用。您将获得与方法 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) }
    }

输出

【问题讨论】：

看看这个，medium.com/geekculture/…
我已经使用 objectanimator 实现了翻转卡。但现在我正在寻找 jetpack compose 的解决方案。
你的两种方法对我来说都很好，.graphicsLayer 可以解决问题。我只是将颜色切换到 90 度，而不是连续地对其变化进行动画处理，以避免出现紫色阴影。为什么const val DefaultCameraDistance = 8.0f 不够好？
默认相机距离对于我的卡片大小来说有点烦人。它在旋转时覆盖了整个屏幕宽度。所以我通过乘以密度来增加它一点，并用一些不同的设备进行测试。对我来说它看起来很完美。由于这是一个透视问题，所以它也取决于您卡片的高度和宽度。您可以使用适合您要求的内容。我对谷歌的推荐感到困惑
当它只有 8 或在我的情况下为 8*密度时，大于视图大小是什么意思？他们建议 --- 如果更改了 rotationX 或 rotationY 属性并且此视图很大（超过屏幕大小的一半），建议始终使用大于高度（X 轴旋转）或此视图的宽度（Y 轴旋转）

标签： android android-animation android-jetpack-compose

【解决方案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.

【讨论】：