Как создать зацикленную анимацию с несколькими эффектами в SwiftUI?

Question

Я пытаюсь создать анимацию, которая будет воспроизводиться, пока логическое значение равно true (isInExercise). Эта анимация заключается в увеличении радиуса круга, удержании этого радиуса, а затем уменьшении на al oop, в конце концов, со звуками.

Я также хочу, чтобы в промежутке времени текст в центре круга изменялся сам по себе, а не на ту же продолжительность, что и анимация для растущего / уменьшающегося круга.

Как могу я go сделать это? Переход из среды JS в Swift - это настоящий культурный шок. Вот мой код для этого представления:

import SwiftUI

struct BreathingCircleView: View {
    @State private var isInExercise : Bool = false
    @State private var breathState : Int = 0

    private func updateBreathState() {
        breathState = (breathState + 1) % 3
    };

    let breathStateValues:  [(text: String, time: Double)] = [
        (text: "Inhale", time: 4.0),
        (text: "Retain", time: 16.0),
        (text: "Exhale", time: 8.0)
    ]

    var body: some View {
        let text = isInExercise ? breathStateValues[breathState].text : "Begin"

        let content = AnyView(
            Circle()
                .stroke(Color.white, lineWidth: 2)
                .frame(width: 200)
                .overlay(
                    Button(action: {
                        withAnimation {
                            self.isInExercise.toggle()
                        }
                        Timer.scheduledTimer(
                            withTimeInterval: self.breathStateValues[self.breathState].time,
                            repeats: false
                        ) { Timer in
                            if (self.breathState == 0) {
                                //grow the Circle() radius for 4 seconds
                                //fade the text to be "Inhale"
                            }
                            else if (self.breathState == 1) {
                                //do nothing for 16 seconds
                                //fade the text to be "Retain"
                            }
                            else {
                                // shrink the radius for 8 seconds
                                // fade text to be "Exhale"
                            }
                        }
                    }) {
                        Text(text)
                        .font(.custom("Gill Sans", size: 32))
                        .foregroundColor(.white)
                    }
                )
        )

        return ZStack {
            Color("Background Color")
                .overlay(content)
                .edgesIgnoringSafeArea(.all)
        }
    }
}

struct BreathingCircleView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            BreathingCircleView()
                .colorScheme(.light)
                .previewLayout(.fixed(width: 300, height: 300))
            BreathingCircleView()
                .colorScheme(.dark)
                .previewLayout(.fixed(width: 300, height: 300))
        }

    }
}

Я лично не знаю, как анимировать несколько анимаций на l oop вместе, так как я хочу, чтобы они были последовательными, а не зацикливались в своем собственном темпе, используя .repeatForever. И я так растерялся, что оживил бы текст в своем собственном темпе. Спасибо