SwiftUI同心圆，通过逐渐出现来显示进度

我有一个三个级别的比赛，每个级别都是5分(总共15分).我想用代表每个级别的三个同心圆或环来显示用户的进度.圆环一开始是空的，只有一个轮廓，当用户收集一个点时，五分之一的圆被填充了一种 colored颜色 ，直到整个圆被填充，在这一点上，这个过程重复到下一个关卡.我有下面的代码，但出于某种原因，当我在模拟器中运行它时，圆圈已经填满了.我如何才能让他们在用户获得积分时逐渐填满(一次填满五分之一)？

import SwiftUI

struct ContentView: View {
    @State private var progressLevel1: CGFloat = 0.0
    @State private var progressLevel2: CGFloat = 0.0
    @State private var progressLevel3: CGFloat = 0.0

    var body: some View {
        VStack {
            Spacer()
            
            ZStack {
                Circle()
                    .stroke(Color.green, lineWidth: 20)
                    .frame(width: 150, height: 150)
                    .overlay(
                        Circle()
                            .trim(from: 0.0, to: progressLevel1)
                            .stroke(Color.green, lineWidth: 20)
                            .frame(width: 150, height: 150)
                            .rotationEffect(.degrees(-90))
                    )
                
                Circle()
                    .stroke(Color.blue, lineWidth: 20)
                    .frame(width: 200, height: 200)
                    .overlay(
                        Circle()
                            .trim(from: 0.0, to: progressLevel2)
                            .stroke(Color.blue, lineWidth: 20)
                            .frame(width: 200, height: 200)
                            .rotationEffect(.degrees(-90))
                    )
                
                Circle()
                    .stroke(Color.purple, lineWidth: 20)
                    .frame(width: 250, height: 250)
                    .overlay(
                        Circle()
                            .trim(from: 0.0, to: progressLevel3)
                            .stroke(Color.purple, lineWidth: 20)
                            .frame(width: 250, height: 250)
                            .rotationEffect(.degrees(-90))
                    )
            }
            
            Spacer()
            
            Button("Collect Point") {
                withAnimation {
                    if progressLevel1 < 1.0 {
                        progressLevel1 += 0.2
                    } else if progressLevel2 < 1.0 {
                        progressLevel2 += 0.2
                    } else if progressLevel3 < 1.0 {
                        progressLevel3 += 0.2
                    }
                }
            }
            .padding()
        }
        .onAppear {
            // Set initial values to 0 to start with empty circles
            progressLevel1 = 0.0
            progressLevel2 = 0.0
            progressLevel3 = 0.0
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}