如何在 SWIFTUI 中旋转修剪

为修剪偏移的更改设置动画.由于很难设置超过0和1的边界的动画，因此使用.rotation(Angle(degrees: 180))可始终保持在0和1的边界内:

struct ContentView: View {
    let colors = [Color.green, Color.blue]
    @State private var offset = 0.0
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .foregroundColor(.gray.opacity(0.1))
                .frame(width: 195, height: 50)
            
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .trim(from: 0.25 + offset, to: 0.5 + offset)
                .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round))
                .frame(width: 195, height: 50)
 
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .trim(from: 0.25 + offset, to: 0.5 + offset)
                .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round))
                .rotation(Angle(degrees: 180))
                .frame(width: 195, height: 50)
            
            Text("title")
                .foregroundStyle(LinearGradient(gradient: Gradient(colors: colors),
                                                startPoint: .topLeading,
                                                endPoint: .bottomTrailing))
        }
        .onAppear {
            withAnimation(.linear(duration: 0.75).repeatForever(autoreverses: false)) {
                offset = 0.5
            }
        }
    }
}

优化代码

因为这两条"蛇"除了180度旋转之外都是一样的，所以我们可以用ForEach来编码:

ForEach([0.0, 180.0], id: \.self) { rotation in
    RoundedRectangle(cornerRadius: 20, style: .continuous)
        .trim(from: 0.25 + offset, to: 0.5 + offset)
        .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round))
        .rotation(Angle(degrees: rotation))
        .frame(width: 195, height: 50)
}