SwiftUI中如何解决虚线相位动画的不流畅瑕疵问题？

我在尝试给SwiftUI里的圆环虚线相位做动画时，遇到了动画不流畅、有断连瑕疵的问题，怎么调整才能让它实现平滑连续的动画效果呢？

先看看我最初的效果：红色宽线圆环在动画过程中会出现明显的跳变和断连，没法实现连贯的循环滚动。

下面是我最初的代码：

import SwiftUI

struct ContentView: View {
    
    let lineWidth: CGFloat = 90.0
    
    var body: some View {
        
        DashedCircleView(lineWidth: lineWidth)
        
    }
}

struct DashedCircleView: View {
    
    let lineWidth: CGFloat
    
    @State private var phaseAnimation: Bool = Bool()
    @State private var animation: Animation? = nil

    var body: some View {
        
        VStack {
            
            Spacer()
            
            Circle()
                .strokeBorder(Color.red, style: StrokeStyle(
                        lineWidth: lineWidth,
                        dash: [2*lineWidth],
                        dashPhase: phaseAnimation ? 4*lineWidth : .zero))
                .frame(width: 400, height: 400)
                .animation(animation, value: phaseAnimation)
            
            Spacer()

            Button("run Animation") {
                
                if (phaseAnimation) {
                    animation = Animation.interactiveSpring
                    phaseAnimation.toggle()
                }
                else {
                    animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)
                    phaseAnimation.toggle()
                }
                
            }
            
        }
        .padding()
        
    }
}

后来我调整了代码，终于实现了平滑连续的动画效果，修复后的动画不会再有断连跳变，能完美循环滚动。下面是可用的工作代码：

import SwiftUI

struct ContentView: View {
            
    var body: some View {
        
        DashedCircleView(lineWidth: 30.0, dashCount: 10, size: 400.0)
 
    }
}

struct DashedCircleView: View {
    
    let lineWidth: CGFloat
    let dashCount: Int
    let size: CGFloat
    
    @State private var phaseAnimation: Bool = Bool()
    
    var body: some View {
        
        VStack {
            
            Spacer()

            Circle()
                .strokeBorder(Color.red, style: StrokeStyle(lineWidth: lineWidth,
                                                            dash: [(size - lineWidth) * CGFloat.pi / (CGFloat(dashCount)*2.0)],
                                                            dashPhase: phaseAnimation ? (size - lineWidth) * CGFloat.pi / CGFloat(dashCount) : .zero))
                .frame(width: size, height: size)
                .animation(phaseAnimation ? Animation.linear(duration: 1).repeatForever(autoreverses: false) : Animation.interactiveSpring, value: phaseAnimation)
            
            Spacer()
            
            Button(phaseAnimation ? "Pause Animation" : "Run Animation") {
                phaseAnimation.toggle()
            }
            
        }
        .padding()
        
    }
}

修复后的动画效果：红色宽线圆环能平滑、连续地循环滚动，没有任何断连或跳变瑕疵，完全符合预期。

备注：内容来源于stack exchange，提问作者swiftPunk