SwiftUI：如何取消Animatable视图的属性动画并即时响应？

你实现的CircularProgressView虽然遵循了Animatable协议，但存在几个核心问题导致动画无法按预期响应：

• 父视图用Bool类型的progressStarted间接控制进度值，动画触发的依赖值是布尔值而非进度数值本身，导致动画逻辑混乱；
• 子视图中FGColor和BGColor错误使用了@State属性，初始化传入的静态颜色不需要状态管理，反而会导致不必要的状态存储；
• 当动画正在执行时切换布尔值，新的动画会被追加到现有动画队列中，而非重置动画到目标值。

1. 重构CircularProgressView #

去掉不必要的@State属性，确保Animatable协议的正确实现：

import SwiftUI

struct CircularProgressView: View, Animatable {
    // 外部传入的静态颜色改为普通属性，无需@State
    let foregroundColor: Color
    let backgroundColor: Color
    var percentComplete: Float
    
    // 正确绑定animatableData到进度值
    var animatableData: Float {
        get { percentComplete }
        set { percentComplete = newValue }
    }
    
    init(foregroundColor: Color, backgroundColor: Color = .clear, percentComplete: Float) {
        self.foregroundColor = foregroundColor
        self.backgroundColor = backgroundColor
        self.percentComplete = percentComplete
        print("Progress control init with \(percentComplete) %")
    }
    
    var body: some View {
        VStack {
            Text("progressControl internal percent: \(percentComplete, specifier: "%.1f")")
            ZStack {
                Circle()
                    .stroke(backgroundColor.opacity(0.5), lineWidth: 30)
                
                Circle()
                    .trim(from: 0, to: CGFloat(percentComplete / 100))
                    .stroke(foregroundColor, lineWidth: 30)
                    .rotationEffect(.degrees(-90))
            }
        }
    }
}

2. 父视图直接控制进度数值 #

改用@State的Float类型变量管理进度，通过withAnimation触发动画，确保每次切换都会直接重置到目标值：

import SwiftUI

struct ContentView: View {
    @State private var currentProgress: Float = 0
    
    var body: some View {
        VStack {
            CircularProgressView(
                foregroundColor: .red,
                percentComplete: currentProgress
            )
            
            Text("Progress is \(currentProgress == 100 ? "completed" : "in progress")")
            Button(action: {
                // 用withAnimation包裹状态变化，明确触发动画时机
                withAnimation(.linear(duration: 5)) {
                    currentProgress = currentProgress == 0 ? 100 : 0
                }
            }, label: {
                Text("Toggle progress")
            })
        }
        .padding()
    }
}

3. 中途打断动画的支持 #

上述方案天然支持在动画执行过程中切换进度——每次调用withAnimation都会直接将进度值设置为目标值，SwiftUI会自动中断当前动画并启动新的动画到新目标。

• 让Animatable协议绑定的animatableData直接对应进度数值，确保动画系统能正确插值更新视图；
• 用具体的数值类型（而非布尔值）作为动画触发的依赖，让动画逻辑更清晰；
• 使用withAnimation包裹状态变化，明确触发动画的时机，避免动画叠加导致的延迟响应。

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