Jetpack Compose替换animateFloatAsState为Transition.animateFloat后动画失效求助

问题核心出在animateFloat的状态判断逻辑错误，你在when(state)里误用外部的rotated变量做判断条件，而非根据参数state本身的值映射角度。

修正后的代码 #

var rotated by remember { mutableStateOf(false) }

val transition = updateTransition(
    targetState = rotated,
    label = "Rotate"
)

val animateAngle: Float by transition.animateFloat(
    transitionSpec = { tween(2000) },
    label = "Rotate box"
) { state ->
    // 根据过渡的目标状态state直接映射角度
    when(state) {
        true -> 360f
        false -> 0f
    }
}

Column {
    Image(
        painter = painterResource(id = R.drawable.propeller),
        contentDescription = "fan",
        modifier = Modifier
            .rotate(animateAngle)
            .padding(30.dp)
            .size(100.dp)
    )

    Button(onClick = { rotated = !rotated }) {
        Text(text = "Rotate Box")
    }
}

原因说明 #

• transition.animateFloat的lambda参数state，代表当前过渡的目标状态值，也就是updateTransition中targetState的当前值。
• 你原代码里的when(state) { rotated -> 360f }逻辑混乱：相当于每次拿外部的rotated变量和state做比较，当点击按钮切换rotated时，这个判断条件会跟着实时变化，导致过渡系统无法正确识别状态映射关系，自然无法触发动画。
• 正确逻辑是直接根据state的布尔值返回对应角度，让过渡系统基于targetState的变化，自动在0f和360f之间完成插值动画。

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