ActivityRingAnimation.swift

//
//  ContentView.swift
//  ActivityRingAnimation WatchKit Extension
//
//  Created by AppleDesignDev on 1/25/22.
//
import SwiftUI
struct ContentView: View {
    var body: some View {
        TimelineView(.periodic(from: .now, by: 1.0)) { timeline in
            ActivityStartRing(now: timeline.date)
        }
    }
}

struct ActivityStartRing: View {
    let states = ["Ready", "3", "2", "1"]
    @State private var progress = [1,0.66,0.33,0]
    @State var progressIndex = 0
    @State var textIndex = 0
    var now: Date
    var body: some View {
        ZStack() {
            Group {
                Circle()
                    .stroke(style: StrokeStyle(lineWidth: 15, lineCap: .round))
                    .brightness(-0.3)
                Circle()
                    .trim(from: 0, to: progress[progressIndex])
                    .stroke(style: StrokeStyle(lineWidth: 15, lineCap: .round))
            }.rotationEffect(.degrees(-90))
            Circle().fill(Color.green).frame(width:15,height:15).offset(y:-75)
            Group {
                Text("Ready")
                    .scaleEffect(textIndex == 0 ? 1 : 0)
                    .opacity(textIndex == 0 ? 1 : 0)
                    .font(.system(size: 35, weight: .medium, design: .rounded))
                    
                Group {
                    Text("3")
                        .scaleEffect(textIndex == 1 ? 1 : 0)
                        .opacity(textIndex == 1 ? 1 : 0)
                    Text("2")
                        .scaleEffect(textIndex == 2 ? 1 : 0)
                        .opacity(textIndex == 2 ? 1 : 0)
                    Text("1")
                        .scaleEffect(textIndex == 3 ? 1 : 0)
                        .opacity(textIndex == 3 ? 1 : 0)
                }.font(.system(size: 80, weight: .medium, design: .rounded))
            }
        }
        .foregroundColor(.green)
        .frame(width: 150, height: 150)
            .onChange(of: now) { _ in
                withAnimation(.spring()){
                    progressIndex = (progressIndex + 1) % states.count
                }
                withAnimation(.spring(response: 0.3, dampingFraction: 0.9, blendDuration: 0.4)){
                    textIndex = (textIndex + 1) % states.count
                }
            }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}