How to Achieve Translate Animation in Jetpack Compose?

Question

I am trying to achieve translate animation in Jetpack compose but i am not able to find Suitable Source for this.Can any one Help me to achieve translate Animation in jetpack compose in which i can set start and edning positionl Manually..

How do you define "position" here? In relation to other composables or using a global Offset? Please specify your exact requirements. — Arpit Shukla, Nov 23 '21 at 07:27
Actually i am trying to animate a view from a X start position to Y Position with animation.. — Ali Jawad Hussain Gorayya, Nov 23 '21 at 08:13
actually i have achieved this using transition animation but i cannot specify start position for it... — Ali Jawad Hussain Gorayya, Nov 23 '21 at 08:14
Please provide enough code so others can better understand or reproduce the problem. — Community, Nov 27 '21 at 04:25

score 7 · Accepted Answer · edited Feb 14 '22 at 20:07

The alternative of translate animation in jetpack compose is OFFSET ANIMATION yes, I was able to achieve this through offset animation.I am sharing the code below with comments in detail so it will be easier for the reader to understand it

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

score 1 · Answer 2 · answered Jun 02 '22 at 23:45

Using the offset was my solution as well. However used animateDpAsState instead. There a tab indicator is moved on the x axis:

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

score 1 · Answer 3 · answered May 11 '23 at 05:49

If your goal is to show/hide some composable with translate animation, the best way is to use AnimatedVisibility:

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

Also, there is a good scheme of how to select suitable animation in Jetpack Compose: https://developer.android.com/jetpack/compose/animation

score 1 · Answer 4 · answered Jul 28 '23 at 15:19

Just chipping in to the discussion. As others have said, using the offset modifier is the quickest way to apply some translation to an element.

However, the offset modifier only affects the content being displayed and not the actual size measurement of the element. If you are offsetting an element A based on which another element B is positioned, the position of element B will remain unchanged regardless of the .offset applied to element A. This usually means you will be left with some empty space. To address this issue, one could apply actual translation using the .graphicsLayer { translationY = translationYPx } modifier.

To sum up, use the .offset modifier whenever possible as it is much more efficient and only resort to .graphicsLayer when you need the size of the element to also change as it goes offscreen for example.

Yeah i was actually looking for that kind of reply rightly explained thanks V Micran — Ali Jawad Hussain Gorayya, Aug 23 '23 at 09:31

How to Achieve Translate Animation in Jetpack Compose?

4 Answers4

Linked