Putting it all Together

Finally, to make this a runnable app, we need to assemble the views. A TabView is a simple and effective navigation container that allows us to place each of our examples on its own screen. The AdvancedAnimationView serves as a simple container to hold our two advanced examples on the same tab.

Here is the remaining code to create the final application.

// MARK: - Advanced Animation Container
struct AdvancedAnimationView: View {
    var body: some View {
        VStack(spacing: 40) {
            ProgressAnimatorView()
            KeyframeAnimatorView()
        }
        .padding()
    }
}

// MARK: - Main App View with Tab Navigation
struct ContentView: View {
    var body: some View {
        TabView {
            BasicAnimationView()
                .tabItem {
                    Label("Basic", systemImage: "1.circle.fill")
                }

            CombinedAnimationView()
                .tabItem {
                    Label("Combined", systemImage: "2.circle.fill")
                }

            AdvancedAnimationView()
                .tabItem {
                    Label("Advanced", systemImage: "3.circle.fill")
                }
        }
    }
}


#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}