如何在Jetpack Compose中实现Composable首次显示时图片左右平移动画？

要实现Composable首次进入视图时自动启动的滑动动画，核心是利用LaunchedEffect在组件首次组合时触发动画状态变化，配合Compose的动画API完成过渡效果。以下是完整实现方案：

核心实现代码 #

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.platform.LocalConfiguration

fun AutoSlideIcon() {
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    // 自定义图标大小，或通过onSizeChanged获取实际尺寸
    val iconSize = 50.dp

    // 控制动画目标偏移量：初始让图标完全在屏幕左侧外
    var targetOffsetX by remember { mutableStateOf(-iconSize) }
    // 带动画的偏移量状态，自动过渡到目标值
    val offsetX by animateDpAsState(
        targetValue = targetOffsetX,
        animationSpec = tween(
            durationMillis = 1500, // 动画时长1.5秒
            delayMillis = 300 // 延迟300ms启动，避免过于突兀
        )
    )

    // 首次进入组合时触发动画：修改目标偏移量到屏幕右侧
    LaunchedEffect(Unit) {
        targetOffsetX = screenWidth - iconSize
    }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_your_icon), // 替换为你的图标资源ID
            contentDescription = "自动滑动图标",
            modifier = Modifier
                .size(iconSize)
                .offset(x = offsetX)
        )
    }
}

关键细节说明 #

• LaunchedEffect(Unit)：传入Unit作为key，意味着只有当Composable首次进入组合树时，才会执行内部逻辑，完美实现"首次显示自动启动"的需求。
• animateDpAsState：Compose的动画状态API，会自动监听targetOffsetX的变化，将偏移量从当前值平滑过渡到目标值，无需手动处理动画帧。
• 偏移量计算：初始值设为-iconSize让图标完全隐藏在屏幕左侧，目标值设为screenWidth - iconSize让图标右侧对齐屏幕边缘，你可以根据需求调整目标位置（比如设为(screenWidth - iconSize)/2让图标停在屏幕中间）。

进阶优化：获取图标实际尺寸 #

如果你的图标大小不固定，可以通过onSizeChanged获取实际尺寸，避免硬编码：

var iconSize by remember { mutableStateOf(0.dp) }

Image(
    painter = painterResource(id = R.drawable.ic_your_icon),
    contentDescription = "自动滑动图标",
    modifier = Modifier
        .onSizeChanged { size ->
            iconSize = size.width.dp
        }
        .offset(x = offsetX)
)

内容的提问来源于stack exchange，提问作者Android Dev