Анимированный градиентный фон в Swift UI

Я пытаюсь создать анимированный градиент в стиле «флаг» поверх моего профиля пользователя — вроде того, что есть в Stripe: https://stripe.com/gb

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

import SwiftUI

struct UserProfileHeaderView: View {
    let plan: String
    let headerTitle: String
    let greeting: String
    let planDescription: String
    var isTrailingTitle: Bool
    let description: String
    
    @State private var animateGradient = false
    
    var body: some View {
        let startColor = plan == "Classic" ? Color.purple : plan == "Plus" ? Color.red : Color(hex: "#636363")
        let endColor = plan == "Classic" ? Color.blue : plan == "Plus" ? Color.orange : plan == "Ultimate" ? Color(hex: "#010057") : Color(hex: "#636363")
        
        let gradient = LinearGradient(
            gradient: Gradient(colors: [startColor, endColor]),
            startPoint: animateGradient ? .topLeading : .bottomTrailing,
            endPoint: animateGradient ? .bottomTrailing : .topLeading
        )

        VStack(alignment: .leading, spacing: 8) {
            HStack {
                if !isTrailingTitle {
                    TextInfinity(text: headerTitle)
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        .fontWeight(.bold)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                } else {
                    Spacer()
                    TextInfinity(text: headerTitle)
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        .fontWeight(.bold)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .trailing)
                }
            }
            HStack {
                if !isTrailingTitle {
                    TextInfinity(text: greeting)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(.leading)
                } else {
                    Spacer()
                    TextInfinity(text: greeting)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(.leading)
                        .padding(.trailing)
                }
            }
            HStack {
                if !isTrailingTitle {
                    TextInfinity(text: description)
                        .font(.title3)
                        .foregroundColor(.white)
                        .padding(.leading)
                } else {
                    Spacer()
                    TextInfinity(text: description)
                        .font(.title3)
                        .foregroundColor(.white)
                        .padding(.leading)
                        .padding(.trailing)
                }
            }
            HStack {
                Spacer()
                TextInfinity(text: plan == "none" ? "NOT SUBSCRIBED" : planDescription.uppercased())
                    .font(.headline)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding([.trailing, .bottom], 10)
            }
        }
        .padding(.top, 35)
        .frame(maxWidth: .infinity)
        .background(gradient)
        .padding(.horizontal, 0)
        .padding(.vertical, 20)
        .ignoresSafeArea()
        .onAppear {
            withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
                animateGradient.toggle()
            }
        }
    }
}

// Preview Provider
struct UserProfileHeaderView_Previews: PreviewProvider {
    static var previews: some View {
        UserProfileHeaderView(
            plan: "Classic",
            headerTitle: "Your Profile",
            greeting: "Welcome!",
            planDescription: "Classic Plan",
            isTrailingTitle: false,
            description: "\( DeveloperPreview.shared.user.name ?? "")\(( DeveloperPreview.shared.user.name != nil &&  DeveloperPreview.shared.user.name != "") ? " | " : "")\( DeveloperPreview.shared.user.email)"
        )
    }
}