Блог

Главная - Вопросы по программированию - Как сделать анимацию флипкарты в Jetpack compose

Как сделать анимацию флипкарты в Jetpack compose

#android #android-animation #android-jetpack-compose

Вопрос:

У меня есть существующее приложение, в котором я реализовал анимацию флипкарты, как показано ниже, с помощью Objectanimator в XML. Если я нажму на карту, она перевернется горизонтально. Но теперь я хочу перенести его в jetpack compose. Итак, можно ли сделать анимацию флип-карты в jetpack?

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

Обновить

Наконец, я закончил с этим. Хотя я не знаю, правильный это путь или нет, но я получил именно то, что хотел. Если есть какая-то лучшая альтернатива, которую вы можете предложить. Спасибо.

Метод 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) }
    }

Выход

введите описание изображения здесь

Комментарии:

1. зацени это, medium.com/geekculture/…

2. Я уже реализовал flipcard с помощью objectanimator. Но теперь я ищу решение в jetpack compose.

3. Оба ваших метода кажутся мне хорошими, .graphicsLayer это делает свое дело. Я просто переключаю цвет под углом 90 градусов, а не анимирую его непрерывное изменение, чтобы избежать оттенков фиолетового. Почему этого const val DefaultCameraDistance = 8.0f недостаточно?

4. Расстояние до камеры по умолчанию выглядело немного раздражающим для меня из-за размера моей карты. При вращении он занимал всю ширину экрана. Поэтому я немного увеличил его, умножив на плотность, и протестировал на нескольких разных устройствах. Мне это показалось идеальным. Поскольку это вопрос перспективы, это также зависит от высоты и ширины вашей карты. Вы можете использовать то, что соответствует вашим требованиям. Однако меня смущает рекомендация Google

5. Что это означает, если размер больше размера представления, когда он составляет всего 8 или, в моем случае, 8*плотность? Они рекомендуют — Если свойства rotationX или rotationY изменены и этот вид большой (более половины размера экрана), рекомендуется всегда использовать расстояние до камеры, превышающее высоту (поворот по оси X) или ширину (поворот по оси Y) этого вида.

Ответ №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.

Метки: