SwiftUI条件动画无法停止问题排查

问题描述 #

我有一个使用scaleEffect(bool1 ? bool2 ? 1.2 : 1 : 1)的Button：当bool1为false时，scaleEffect应保持1；bool2通过withAnimation(.easeInOut(duration: 0.5).repeatForever())持续切换。预期bool1为true时按钮在两个值间缩放，为false时停止动画，但实际未生效。

相关代码：

struct FullAnimationView: View {
    
    @State var bool1 = false
    @State var bool2 = false

    var body: some View {
            Button {
                bool1.toggle()
            } label: {
                Text(String(bool1))
                    .frame(width: 60, height: 30)
                    .background(RoundedRectangle(cornerRadius: 6).stroke(bool1 ? bool2 ? Color.red : Color.orange : Color.orange))
            }
            .background(bool1 ? bool2 ? .red.opacity(0.3) : .orange.opacity(0.3) : .orange.opacity(0.3))
            .cornerRadius(6)
            .scaleEffect(bool1 ? bool2 ? 1.2 : 1 : 1)
            .onAppear {
                withAnimation(.easeInOut(duration: 0.5).repeatForever()) {
                   bool2.toggle()
                }
                bool1.toggle()
            }
    }
}

问题原因 #

1. 无限动画未被动态控制：你在onAppear中启动的repeatForever动画是一次性触发后无限循环的，无论bool1状态如何，bool2都会持续被动画驱动切换。即使bool1为false时scaleEffect固定为1，后台的动画仍在运行，既不符合“停止动画”的预期，还会造成不必要的状态更新。
2. 嵌套三目运算符逻辑冗余：bool1 ? bool2 ? 1.2 : 1 : 1这种多层嵌套写法等价于bool1 && bool2 ? 1.2 : 1，但嵌套结构不仅可读性差，还容易在修改时出错。

解决方案 #

修改思路 #

• 按需启动/停止动画：通过监听bool1的状态变化，动态控制动画的启停，同时在停止时重置bool2的值，确保scale回到初始状态。
• 简化逻辑表达式：把嵌套三目替换为更直观的逻辑与判断，提升代码可维护性。

修改后的代码 #

struct FullAnimationView: View {
    
    @State var bool1 = false
    @State var bool2 = false
    @State private var animationID = UUID() // 用于重置动画状态

    var body: some View {
        Button {
            bool1.toggle()
        } label: {
            Text(String(bool1))
                .frame(width: 60, height: 30)
                .background(
                    RoundedRectangle(cornerRadius: 6)
                        .stroke(bool1 && bool2 ? .red : .orange)
                )
        }
        .background(bool1 && bool2 ? .red.opacity(0.3) : .orange.opacity(0.3))
        .cornerRadius(6)
        .scaleEffect(bool1 && bool2 ? 1.2 : 1)
        .onAppear {
            bool1.toggle()
        }
        .onChange(of: bool1) { isActive in
            if isActive {
                // 启动动画前重置ID，清除之前的动画残留
                animationID = UUID()
                withAnimation(.easeInOut(duration: 0.5).repeatForever(autoreverses: true)) {
                    bool2.toggle()
                }
            } else {
                // 停止动画并重置状态，确保scale回到1
                withAnimation {
                    bool2 = false
                }
            }
        }
    }
}

关键修改点说明 #

• animationID的作用：每次启动新动画时更新UUID，能重置之前的动画状态，避免旧动画残留导致的异常行为。
• onChange(of: bool1)监听：
  • 当bool1变为true时，启动带autoreverses: true的无限动画（和之前的toggle效果一致，且更符合SwiftUI动画的最佳实践）。
  • 当bool1变为false时，用普通动画重置bool2为false，既停止了无限动画，又确保scaleEffect立即回到1。
• 简化逻辑判断：所有嵌套三目运算符都替换为bool1 && bool2的逻辑，代码更清晰易懂。

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