How to Animate An Image in Jetpack Compose?-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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