SwiftUI Side menu content view switching with animation - swift

Question

I've found many SwiftUI side menu tutorials on the internet, but none of them shows how to switch between content views. So I tried to create one, which seems to be work, my only problem is when I select any of the menu items, there's no transition animation between the contents (except when you select the active one in the menu).
I'd like to know, if this is a good approach and I need some help to complete the animation...
Thank you in advance!
import SwiftUI
enum PageSelector {
case home
case services
case testimonials
case contact
}
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()
MenuItem(action: {
self.show.toggle()
self.pageSelector = .home
}, title: "Home", image: "chevron.right")
MenuItem(action: {
self.show.toggle()
self.pageSelector = .services
}, title: "Services", image: "chevron.right")
MenuItem(action: {
self.show.toggle()
self.pageSelector = .testimonials
}, title: "Testimonials", image: "chevron.right")
MenuItem(action: {
self.show.toggle()
self.pageSelector = .contact
}, title: "Contact", image: "chevron.right")
Spacer()
}
// Content
switchContent(show: show)
.disabled(show ? true : false)
.offset(x: show ? 300 : 0)
.rotationEffect(Angle(degrees: show ? -10 : 0))
.rotation3DEffect(Angle(degrees: show ? 40: 0), axis: (x: show ? 120 : 0, y: show ? 234 : 0, z: show ? 0 : 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 {
switch pageSelector {
case .home:
return AnyView(HomeView())
case .services:
return AnyView(ServicesView())
case .testimonials:
return AnyView(TestiMonialsView())
case .contact:
return AnyView(HomeView())
}
}
}
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(.title)
}
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())
}
}
}
A sample view:
import SwiftUI
struct HomeView: View {
var body: some View {
VStack {
Text("This is Home")
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(Color.white)
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
}
}

Answer 1

You need to separate the layout animation from content animations, like the following:
func switchContent(show: Bool) -> AnyView {
return AnyView( HomeSwitchView(pageSelector: self.$pageSelector))
}
}
struct HomeSwitchView: View {
#Binding var pageSelector : PageSelector
var body: some View {
var text : String?
switch pageSelector {
case .home:
text = "home"
case .services:
text = "services"
case .testimonials:
text = "testimonials"
case .contact:
text = "contact"
}
return VStack {
Text("\(text!)")
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(Color.blue)
}
}

Answer 2

First, remove all self.show.toggle() from MenuItems, like this:
MenuItem(action: {
self.pageSelector = .home
}, title: "Home", image: "chevron.right")
And then add onAppear modifier on switchContent(), like this:
switchContent(show: show)
.disabled(show ? true : false)
.offset(x: show ? 300 : 0)
.rotationEffect(Angle(degrees: show ? -10 : 0))
.rotation3DEffect(Angle(degrees: show ? 40: 0), axis: (x: show ? 120 : 0, y: show ? 234 : 0, z: show ? 0 : 0))
.animation(.spring())
.onAppear {
self.show = false
}
.edgesIgnoringSafeArea(.all)
Tested, this is working for me.