✨MarchingAnts

利用 StrokeStyle 的 dash phase 屬性，來製造邊緣虛線轉動的現象。

📦 MarchingAnts

這個例子利用改變 StrokeStyle 的 dashPhase 屬性，再加上動畫的設定，可以造成虛線轉動的現象 (marching ants effect)。

marching ants effect

import SwiftUI

struct MarchingAnts: View {

    // ⭐️ dash phase
    @State private var phase: CGFloat = 0
    
    // rectangle with dashed stroke
    var body: some View {
        Rectangle()
            // ⭐️ dashed stroke
            .stroke(style: StrokeStyle(lineWidth: 2, dash: [10], dashPhase: phase))
            .foregroundColor(.pink)
            .frame(width: 200, height: 200)
            
            // ⭐️ change phase on appear
            .onAppear { self.phase = -20 }
            // ⭐️ animation forever
            .animation(Animation.linear.repeatForever(autoreverses: false))
    }
}

📗 參考

• How to create a marching ants border effect - Hacking with Swift