How to Animate An Image in Jetpack Compose?

Issue

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

Solution

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

Answered By - Android Dev