SwiftUI自定义圆弧Shape的属性动画无效果问题：如何不使用trim modifier实现同类动画？

我帮你找到了问题所在，并且调整了代码来实现你想要的平滑动画效果，和trim修饰符的表现一致。

问题根源 #

你自定义的CircleShape使用了Angle作为animatableData，虽然Angle理论上支持动画插值，但SwiftUI对基础数值类型（比如Double）的动画支持更稳定直接。另外，原来的动画触发方式虽然可行，但用withAnimation包裹状态变化会更明确，确保动画被正确驱动。

修改后的完整代码 #

struct ContentView: View {
    @State private var endAngle: Angle = Angle()
    
    var body: some View {
        Button("add") {
            // 用withAnimation包裹状态变化，明确触发动画
            withAnimation(.default) {
                endAngle += Angle(degrees: 30.0)
            }
        }.padding()
        
        CircleShape(lineWidth: 10, startAngle: .zero, endAngle: endAngle)
            .stroke(Color.green, style: StrokeStyle(lineWidth: 10, lineCap: .round))
    }
}

struct CircleShape: Shape {
    let lineWidth: CGFloat
    let startAngle: Angle // 固定值用let，不需要参与动画
    var endAngle: Angle
    
    // 将animatableData改为Double类型，对应endAngle的度数
    var animatableData: Double {
        get { endAngle.degrees }
        set { endAngle = Angle(degrees: newValue) }
    }
    
    func path(in rect: CGRect) -> Path {
        Path { path in
            let radius = (min(rect.width, rect.height) - lineWidth) / 2
            let center = CGPoint(x: rect.midX, y: rect.midY)
            path.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
        }
    }
}

关键调整点 #

• 替换animatableData类型：把Angle换成Double（对应角度的度数），SwiftUI对基础数值的插值动画支持更可靠，能确保每一个动画帧都生成正确的圆弧路径。
• 明确触发动画：用withAnimation包裹endAngle的变化，比在视图上添加animation修饰符更直观，也能避免动画触发的不确定性。
• 固定不变的属性用let：startAngle和lineWidth不会变化，设为let可以让SwiftUI更高效地处理视图更新。

现在点击按钮，圆弧就会平滑地逐步扩展，完全达到你想要的动画效果啦。

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