如何在 Jetpack Compose 中为图像设置动画？

Question

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

Answer 1

您可以为此使用 MotionLayout，对于动画的进度，您可以使用每隔几毫秒上升一次的计数器，具体取决于您希望动画持续多长时间。

Answer 2

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