Как добиться анимации перевода в Jetpack Compose?

Question

Я пытаюсь добиться перевода анимации в Jetpack compose, но я не могу найти подходящий источник для этого. Может ли кто-нибудь помочь мне добиться перевода анимации в Jetpack compose, в котором я могу вручную установить start и edning positionl ..

Answer 1

Альтернативой анимации перевода в компоновке реактивного ранца является АНИМАЦИЯ СМЕЩЕНИЯ. Я смог добиться этого с помощью анимации смещения. Я делюсь приведенным ниже кодом с подробными комментариями, чтобы читателю было легко его понять...

      // Courtine Scope to Run the animation in thread
val coroutineScope = rememberCoroutineScope()
val offsetX = remember { Animatable(0f) }
val offsetY = remember { Animatable(0f) }

 Image(
            painter = rememberDrawablePainter(
                ContextCompat.getDrawable(
                    context,
                    R.drawable.image
                )
            ),
            contentDescription = "s", contentScale = ContentScale.Crop,
            modifier = Modifier
                .offset {
                    IntOffset(
                        offsetX.value.toInt(),
                        offsetY.value.toInt()
                    )
                }
                .width(300.dp)
                .height(300.dp)
        )
//Finally run the animation on the Click of your button or whenever you wants to start it...

  coroutineScope.launch {

       launch {
                    offsetXFirst.animateTo(
                    targetValue = targetValue,
                    animationSpec = tween(
                    durationMillis = 2000,
                    delayMillis = 0))}

                launch {
                offsetYFirst.animateTo(
                targetValue = size.height.toFloat(),
                animationSpec = tween(
                durationMillis = 2000,
                delayMillis = 0))}

}

Answer 2

Если ваша цель — показать/скрыть некоторые компонуемые объекты с помощью анимации перевода, лучший способ — использоватьAnimatedVisibility:

      AnimatedVisibility(
        visible = isVisible,
        enter = slideInVertically { it },
        exit = slideOutVertically { it }
) {
   SomeComposable()
}

Также есть хорошая схема выбора подходящей анимации в Jetpack Compose: https://developer.android.com/jetpack/compose/animation

Answer 3

Использование смещения также было моим решением. Однако вместо этого используется animateDpAsState. Там индикатор табуляции перемещается по оси x:

      val offsetState = animateDpAsState(targetValue = targetPositionDp)
Box(modifier = Modifier
        .offset(offsetState.value, 0.dp)
        .background(color = Color.Red)
        .size(tabWidth, tabHeight))

Answer 4

Просто включаюсь в дискуссию. Как уже говорили другие, использование модификатора — это самый быстрый способ применить некоторый перевод к элементу.

ОднакоoffsetМодификатор влияет только на отображаемый контент, а не на фактическое измерение размера элемента. Если вы смещаете элемент в зависимости от того, как позиционируется другой элемент, позиция элементаBостанется неизменным независимо от примененного к элементуA. Обычно это означает, что у вас останется немного пустого места. Чтобы решить эту проблему, можно применить реальный перевод , используя.graphicsLayer { translationY = translationYPx } модификатор .

Подводя итог, используйте.offset модификатор, когда это возможно, поскольку это намного более эффективно и прибегает только к.graphicsLayerкогда вам нужно, чтобы размер элемента также менялся, например, когда он выходит за пределы экрана.