SwiftUI实现环形无限旋转进度条及红黑曲线设计咨询

一、实现进度条沿环形无限旋转 #

你现有代码通过累加进度值推进进度条的方式，无法实现无限循环旋转效果。我们可以通过控制trim的起始偏移量，配合无限重复动画来达成需求：

1. 移除原有的progressValue和incrementProgress()方法，改用@State变量控制进度条的起始偏移量
2. 用withAnimation创建无限线性动画，持续更新偏移量，当偏移量超过1时重置，形成无缝循环
3. 固定进度条的长度，让它沿环形路径持续移动而非填充整个圆环

二、实现旋转路径上的红黑配色曲线 #

将进度条的纯色填充替换为环形渐变（AngularGradient），即可实现沿旋转路径的红黑配色过渡效果。

修改后的完整代码 #

struct CircularProgressView: View {
    // 控制进度条起始偏移量
    @State private var offset: CGFloat = 0.0
    // 进度条的固定显示长度（占环形的比例）
    private let progressLength: CGFloat = 0.3

    var body: some View {
        ZStack {
            ProgressBar(offset: offset, progressLength: progressLength)
                .frame(width: 150.0, height: 150.0)
                .padding(40.0)
        }
        .onAppear {
            startInfiniteRotation()
        }
    }

    private func startInfiniteRotation() {
        withAnimation(.linear(duration: 2.0).repeatForever(autoreverses: false)) {
            offset = 1.0
        }
    }
}

struct ProgressBar: View {
    let offset: CGFloat
    let progressLength: CGFloat

    var body: some View {
        ZStack {
            // 背景圆环
            Circle()
                .stroke(lineWidth: 20.0)
                .opacity(0.3)
                .foregroundColor(.red)

            // 旋转的进度条
            Circle()
                .trim(from: offset, to: offset + progressLength)
                .stroke(
                    style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round)
                )
                // 红黑环形渐变配色
                .stroke(AngularGradient(
                    gradient: Gradient(colors: [.red, .black]),
                    center: .center,
                    startAngle: .degrees(0),
                    endAngle: .degrees(360)
                ))
                .rotationEffect(.degrees(270))
        }
        // 偏移量到达阈值后重置，实现无缝循环
        .onChange(of: offset) { newValue in
            if newValue >= 1.0 {
                offset = 0.0
            }
        }
    }
}

struct CircularProgressView_Previews: PreviewProvider {
    static var previews: some View {
        CircularProgressView()
    }
}

关键修改说明 #

• 用offset变量控制进度条起始位置，通过无限动画让offset从0递增到1，到达后重置为0，实现无缝循环旋转
• 进度条长度固定为progressLength（示例中为环形的30%），可根据需求调整数值
• 使用AngularGradient实现沿环形的红黑渐变，你可以修改Gradient(colors: [.red, .black])的颜色数组来调整配色过渡效果
• 动画时长duration: 2.0可自定义，数值越小旋转速度越快

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