UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Animation Only Works With Original View

Forums > SwiftUI

I finally found a way to get a side menu to show different views, but I'm stumped as to why the animation only works with the original view.

My main ContentView.swift is as follows:

import SwiftUI

enum PageSelector {
    case home
    case first
    case second
}

struct TestView: View {
    @State private var show: Bool = false
    @State private var pageSelector: PageSelector = .home

    var body: some View {
        ZStack {
            // Background of the menu
            Color.blue.edgesIgnoringSafeArea(.all)

            // Menu items and content selection
            VStack(alignment: .leading, spacing: 10) {
                Spacer()
                    .frame(height:60)
                MenuItem(action: {
                    self.pageSelector = .home
                    self.show.toggle()
                }, title: "Home", image: "chevron.right")
                MenuItem(action: {
                    self.pageSelector = .first
                    self.show.toggle()
                }, title: "Services", image: "chevron.right")
                MenuItem(action: {
                    self.pageSelector = .second
                    self.show.toggle()
                }, title: "Testimonials", image: "chevron.right")
                Spacer()
            }

            // Content
            switchContent(show: show)
                .disabled(show ? true : false)
                .offset(x: show ? 300 : 0)
                .animation(.spring())
                .edgesIgnoringSafeArea(.all)

            // Menu button
            VStack {
                HStack {
                    Button(action: { self.show.toggle() }) {
                        MenuButton(show: $show)
                    }
                    Spacer()
                }
                Spacer()
            }
        }
    }

    // Switching pages (views)
    func switchContent(show: Bool) -> AnyView {
        return AnyView( HomeSwitchView(pageSelector: self.$pageSelector))
    }
}

struct HomeSwitchView: View  {
    @Binding var pageSelector : PageSelector

    var body: some View {
        switch pageSelector {
        case .home:
            return AnyView(HomeView())
        case .first:
            return AnyView(FirstView())
        case .second:
            return AnyView(SecondView())
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

struct MenuItem: View {
    let action: ()->Void
    let title: String
    let image: String

    var body: some View {
        HStack {
            Button(action: action) {
                Image(systemName: image)
                    .foregroundColor(.white)
                    .padding(.horizontal)
                    .font(.footnote)
                Text(title)
                    .foregroundColor(.white)
                    .font(.headline)
            }
            Spacer()
        }
    }
}

struct MenuButton: View {
    @Binding var show: Bool

    var body: some View {
        HStack {
            Image(systemName: self.show ? "xmark" : "list.dash")
                .frame(width: 50, height: 50)
                .foregroundColor(self.show ? .blue : .white)
                .background(self.show ? Color.white : Color.blue)
                .cornerRadius(25)
                .scaleEffect(self.show ? 0.6 : 1)
                .shadow(radius: 20)
                .padding()
                .opacity(0.8)
                .animation(.spring())
        }
    }
}

That gets all the menu set up and working nicely (thanks to this discussion on StackOverflow

Each of the separate views (HomeView, FirstView, and SecondView) are all nearly identical with only the text altered to show it moving between them as follows:

struct HomeView: View {
    var body: some View {
        VStack {
            Text("This is Home")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(Color.white)
    }
}

Does anyone know why the animation for the menu sliding back in only works for the HomeView()? Under the switchContent function, I tried commenting out the .disable, chaning the .animation based on the boolean value, but nothing seems to make a difference. I appreciate any help!

2      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.