Jetpack Compose：animateFloatAsState单次动画不生效问题求助

你的单次动画直接跳到目标值，核心问题是使用animateFloatAsState时未指定initialValue：该API默认会把targetValue作为初始值，组件首次组合时直接将状态设为0f，自然不会触发过渡动画。而无限循环动画明确设置了initialValue=1f，所以能正常执行从1f到0f的过渡。

1. 基础单次动画实现 #

给animateFloatAsState添加initialValue=1f，同时移除多余的progress状态和LaunchedEffect（直接用动画值即可，无需额外状态流转）：

@Composable
fun SunsetBox(panchangData: Data?, targetProgress: Float) {
    Box(
        modifier = Modifier
            .requiredWidth(153.dp)
            .requiredHeight(136.dp)
    ) {
        // 定义单次动画：从1f过渡到0f，时长10秒
        val animatedProgress by animateFloatAsState(
            initialValue = 1f,
            targetValue = 0f,
            animationSpec = tween(durationMillis = 10000)
        )

        Image(
            painter = painterResource(id = R.drawable.ic_sunset_sun),
            contentDescription = "Sunset",
            contentScale = ContentScale.FillWidth,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 20.dp)
                .graphicsLayer {
                    translationY = (1 - animatedProgress) * 20.dp.toPx()
                    alpha = animatedProgress
                }
        )
    }
}

2. 可控启动时机的单次动画 #

如果需要在特定条件下（而非组件加载时）触发动画，可以添加一个触发状态，配合key参数重启动画：

@Composable
fun SunsetBox(panchangData: Data?, targetProgress: Float, startAnimation: Boolean) {
    Box(
        modifier = Modifier
            .requiredWidth(153.dp)
            .requiredHeight(136.dp)
    ) {
        val animatedProgress by animateFloatAsState(
            initialValue = 1f,
            targetValue = if (startAnimation) 0f else 1f,
            animationSpec = tween(durationMillis = 10000),
            key = startAnimation // 当startAnimation从false变为true时，重启动画
        )

        Image(
            painter = painterResource(id = R.drawable.ic_sunset_sun),
            contentDescription = "Sunset",
            contentScale = ContentScale.FillWidth,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 20.dp)
                .graphicsLayer {
                    translationY = (1 - animatedProgress) * 20.dp.toPx()
                    alpha = animatedProgress
                }
        )
    }
}

内容的提问来源于stack exchange，提问作者Gaurav Arora