SwiftUI-圆圈进度条

实现圆圈进度条动画

效果

struct TestVC: View {
    
    @State var progressValue: Float = 0.0
    var body: some View {
        
        VStack {
            PreogressView(progressValue: $progressValue, color: .cyan,bigCircleWidth: 20,smallCircleWidth: 12)
                .frame(width: 200, height: 200)
                .onAppear {
                    progressValue = 0.30
                }
            
            
            Button {
                if progressValue < 1.0 {
                    progressValue += 0.1
                    print("\(progressValue)")
                } else {
                    progressValue = 0.0
                    print("\(progressValue)")
                }
                
            } label: {
                Text("增加").font(.largeTitle)
            }
            .padding(50)
        }
        
    }
}

//进度条view
struct PreogressView : View {
    
    @Binding  var progressValue: Float
    var color: Color = .green
    var bigCircleWidth: CGFloat
    var smallCircleWidth: CGFloat
    
    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth: bigCircleWidth)
                .opacity(0.2)
                .foregroundColor(.secondary)
            
            Circle()
                .trim(from: 0.0, to: CGFloat(min(progressValue, 1.0)))
                .stroke(style: StrokeStyle(lineWidth: smallCircleWidth, lineCap: .round, lineJoin: .round, miterLimit: 0.4))
                .foregroundColor(color)
                //旋转使其从顶部开始
                .rotationEffect(Angle(degrees: 270))
                .animation(.easeInOut,value: progressValue)

        }
    }
}