Question 126205 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – How to Animate An Image in Jetpack Compose?

I haven’t seen any posts that are searching for what I want. I simply want to animate an icon to go across the screen. Just an Image, to go left to right upon showing the composable.

So far I’ve only seen that Animations are launched with a button click or when something happens, but I want this Animation to launch when the Composable in first in view

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found an answer that is very simple, I couldn't use AnimateVisibility because you can't really modify the horizontal slide location of the object. Here is a very very simple solution to my problem:

    var visible by remember { mutableStateOf(false) }

val animationTime = 600
val animationDelayTime = 5

val arrowStartLocation = Offset(0F, 0F)
val arrowEndLocation = Offset(100F, 0F)

LaunchedEffect(Unit) {
        visible = true
    }
val arrowLocation by animateOffsetAsState(
    targetValue = if (visible) arrowEndLocation else arrowStartLocation,
    animationSpec = tween(animationTime, animationDelayTime, easing = LinearOutSlowInEasing)
)
ArrowImage(
            modifier = Modifier
                .offset(arrowLocation.x.dp, arrowLocation.y.dp)
        )

    0


  2. 0

    You can use MotionLayout for that, for the progress of the animation you can use a counter that goes up every few ms depends how long you want the animation to last.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search