如何中断并重启Compose AnimatedVisibility动画

不用delay的核心思路是让每次total变化时，触发Badge组件的完全重建，从而中断原有动画并从头执行新动画。这里提供两种可靠实现方式：

方案一：用key强制AnimatedVisibility重建 #

通过给AnimatedVisibility添加key(total)，每次total变更时，Compose会销毁旧的AnimatedVisibility实例（因exit = None，Badge会立即消失），同时创建新实例并重新执行scaleIn动画。

修改后的代码：

@Composable
fun Counter(total: Int) {
    val shouldShow = total > 0
    
    key(total) {
        AnimatedVisibility(
            visible = shouldShow,
            enter = scaleIn(),
            exit = None
        ) {
            Badge(backgroundColor = primaryRed) {
                Text(text = total.toString()) // 注意：需将Int转为String，否则Text会报错
            }
        }
    }
}

方案二：手动控制缩放动画 #

直接使用animateScaleAsState，并将total作为动画的依赖key，每次total变化时重置动画状态，从0f开始缩放至1f。

代码示例：

@Composable
fun Counter(total: Int) {
    val shouldShow = total > 0
    
    val scale by animateScaleAsState(
        targetValue = if (shouldShow) 1f else 0f,
        animationSpec = tween(),
        key = total
    )
    
    if (shouldShow) {
        Badge(
            backgroundColor = primaryRed,
            modifier = Modifier.scale(scale)
        ) {
            Text(text = total.toString())
        }
    }
}

两种方案都能实现“点击按钮后立即中断旧动画、重启新动画”的需求，无需依赖delay这种硬编码的等待逻辑，其中方案一更贴合AnimatedVisibility的使用习惯，代码更简洁。

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