SwiftUI Circle View 实现圆形进度条时动画出现异常的原因是什么？

核心诱因：多余偏移导致双进度条错位 #

你在ZStack中作为背景的半透明黑色Circle视图上，额外添加了.offset(x: 0, y: 10)修饰符，这会让底层的进度圆弧和上层白色的进度圆弧绘制位置上下偏移10个点，两者无法重合。当progress变化触发动画时，两条不同位置的进度变化效果叠加，就出现了你看到的重叠、错位的异常故障。

直接删除底层Circle的offset修饰符即可解决该问题，修改后的核心代码如下：

var body: some View {
    ZStack {
        Circle()
            .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
            .stroke(style: strokeStyle)
            .opacity(0.2)
            .foregroundColor(Color.black)
            .rotationEffect(rotation)
            // 已移除多余的.offset(x: 0, y: 10)代码
                        
        Circle()
            .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
            .stroke(style: strokeStyle)
            .opacity(1)
            .foregroundColor(Color.white)
            .rotationEffect(rotation)
            
    }
    .animation(.linear(), value: progress)
}

次要优化点：进度归零动画突兀问题 #

当你点击按钮触发progress >= 1时会直接将progress赋值为0，此时trim的to参数从1跳变到0，SwiftUI默认会按照两个数值的最短路径计算动画过渡，会让圆弧直接从满值位置往回收缩到起点，而非沿着进度前进方向走完一圈归零，也会产生跳转动画的突兀感。如果需要修复该问题，可修改进度重置逻辑，在重置时临时关闭动画或者调整过渡规则即可。

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