SwiftUI 如何实现支持任意虚线宽度的完整 marching ants 蚂蚁线边框效果

问题根因 #

你当前的实现存在两个核心问题：

1. 单元素dash数组的默认行为存在不确定性，且dashPhase的变化逻辑没有严格对齐虚线的完整周期
2. 使用Bool切换触发单次状态变化再叠加重复动画的方式，在dashPhase变化量较大时容易出现插值异常

核心解决逻辑 #

要让任意宽度的虚线都能正常实现蚂蚁线效果，只需保证**dashPhase的动画变化量严格等于虚线的一个完整周期长度**，虚线周期长度等于StrokeStyle中dash数组所有元素的总和。

额外优化点：

• 明确声明dash数组的两个参数（实段长度、空白段长度），避免系统默认处理的差异
• 直接使用dashPhase状态变量驱动动画，无需通过Bool切换间接控制
• 如果需要保留round线帽，要额外调整空白段长度抵消线帽带来的长度偏移

修复后代码 #

struct ContentView: View {
    
    @State private var dashWidth: CGFloat = 40.0
    @State private var dashPhase: CGFloat = 0
    // 线宽统一提取，方便后续调整
    private let lineWidth: CGFloat = 2.0
    
    var body: some View {
        
        Text("dashWidth: " + String(describing: Int(dashWidth))).bold()
        
        RoundedRectangle(cornerRadius: 20.0)
            .strokeBorder(
                style: StrokeStyle(
                    lineWidth: lineWidth,
                    lineCap: .round,
                    // 明确声明实段、空白段长度，如果不需要round线帽，空白段直接写dashWidth即可
                    dash: [dashWidth, dashWidth + lineWidth],
                    dashPhase: dashPhase
                )
            )
            .foregroundColor(Color.blue)
            .frame(width: 200, height: 200)
            .onAppear {
                // 计算单个虚线周期长度 = dash数组所有元素之和
                let dashCycle = dashWidth + (dashWidth + lineWidth)
                // 启动无限线性动画，让dashPhase每次刚好变化一个周期长度，实现无缝循环
                withAnimation(.linear(duration: 0.5).repeatForever(autoreverses: false)) {
                    dashPhase = -dashCycle
                }
            }
    }
}

补充说明 #

如果不需要round线帽，把lineCap改成.butt，同时dash数组改成[dashWidth, dashWidth]，dashCycle就等于2 * dashWidth，同样可以正常运行。你可以任意调整dashWidth的取值，只要保持dashPhase的变化量等于dash数组的总和，就能实现流畅的蚂蚁线效果。

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