Jetpack Compose单次点击触发图片淡入旋转后淡出的动画问题

开发音效板应用时，需要实现点击按钮后，图片依次完成淡入→旋转数次→淡出的完整动画序列，且仅需一次点击操作。目前已实现淡入和旋转效果，但无法让图片自动触发淡出，必须再次点击按钮才行。希望通过Jetpack Compose原生动画API实现，无需编写自定义函数。

已尝试过AnimatedVisibility、AnimatedContent、animateFloatAsState等API，也通过tween、repeatable、keyframes修改animationSpec属性，但动画结束后图片始终保持可见。

尝试的示例代码：

var isVisible by remember {
    mutableStateOf(false)
}

Button(onClick = {
    isVisible = !isVisible
}) {
    Text("Toggle")
}

val alpha by animateFloatAsState(
    targetValue = if (isVisible) 1f else 0f,
    animationSpec = repeatable(2, 
        animation = tween(5000), repeatMode = RepeatMode.Reverse)
    ,label = "label")
Box(
    Modifier
        .fillMaxWidth()
        .height(100.dp)
        .graphicsLayer(alpha = alpha)
        .background(Color.Red)
)

核心问题在于当前用isVisible的切换状态控制动画，动画结束后isVisible仍为true，所以图片不会自动淡出。可以通过LaunchedEffect触发完整动画序列，配合animateFloatAsState分别控制透明度和旋转角度，实现一次点击完成三段动画：

方案1：用keyframes定义完整时间线动画 #

通过keyframes直接整合淡入、旋转、淡出的时间节点，同时控制透明度和旋转角度：

var triggerAnimation by remember { mutableStateOf(false) }

// 透明度动画：按时间线完成淡入→保持→淡出
val alpha by animateFloatAsState(
    targetValue = 0f, // 最终回到透明状态
    animationSpec = keyframes {
        durationMillis = 6000 // 总时长：1s淡入 + 4s旋转 + 1s淡出
        0f at 0
        1f at 1000 // 1秒时完成淡入
        1f at 5000 // 前5秒保持可见（期间执行旋转）
        0f at 6000 // 第6秒完成淡出
    },
    label = "alphaAnimation",
    finishedListener = {
        triggerAnimation = false // 动画结束后重置触发状态，方便下次点击
    }
)

// 旋转动画：淡入后开始旋转2圈，持续4秒
val rotation by animateFloatAsState(
    targetValue = if (triggerAnimation) 360f * 2 else 0f,
    animationSpec = tween(4000, delayMillis = 1000),
    label = "rotationAnimation"
)

Button(onClick = { triggerAnimation = true }) {
    Text("播放动画")
}

Box(
    Modifier
        .fillMaxWidth()
        .height(100.dp)
        .graphicsLayer(alpha = alpha, rotationZ = rotation)
        .background(Color.Red)
)

方案2：用LaunchedEffect分步控制动画 #

如果需要更灵活的步骤调整，用LaunchedEffect按顺序执行各阶段动画：

var alpha by remember { mutableStateOf(0f) }
var rotation by remember { mutableStateOf(0f) }
var triggerAnimation by remember { mutableStateOf(false) }

LaunchedEffect(triggerAnimation) {
    if (triggerAnimation) {
        // 1. 淡入
        alpha = 1f
        delay(1000)
        
        // 2. 旋转2圈
        rotation = 360f * 2
        delay(4000)
        
        // 3. 淡出
        alpha = 0f
        delay(1000)
        
        // 重置状态，避免下次点击异常
        triggerAnimation = false
        rotation = 0f
    }
}

// 给透明度和旋转添加动画过渡
val animatedAlpha by animateFloatAsState(alpha, animationSpec = tween(1000), label = "alpha")
val animatedRotation by animateFloatAsState(rotation, animationSpec = tween(4000), label = "rotation")

Button(onClick = { triggerAnimation = true }) {
    Text("播放动画")
}

Box(
    Modifier
        .fillMaxWidth()
        .height(100.dp)
        .graphicsLayer(alpha = animatedAlpha, rotationZ = animatedRotation)
        .background(Color.Red)
)

说明 #

• 两种方案都只需一次点击触发triggerAnimation，即可自动完成完整动画序列。
• 方案1用keyframes更简洁，适合固定时间线的场景；方案2用LaunchedEffect更灵活，可随时调整各步骤的延迟或逻辑。
• 动画结束后重置触发状态，避免重复触发或状态残留。

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