Day 10: Smooth as Butter Transitions 🌀
In the tenth post of the #30DaysOfSwift series, we’re diving into Custom Transitions and Animations to create seamless page/view transitions in SwiftUI.
With SwiftUI’s built-in animation tools, you can give your app a smooth, polished look when users navigate between different views.
Steps to Create Custom Transitions:
Set Up the Views and Transitions: Start by making two views: a home screen and a detail screen, and animate the transition between them using a custom transition. n
import SwiftUI
struct CustomTransitionsView: View {
@State private var showDetailView = false
var body: some View {
ZStack {
if showDetailView {
DetailView()
.transition(.move(edge: .trailing)) // Custom transition
.zIndex(1) // Ensure this view is in front during transition
} else {
HomeView()
.transition(.move(edge: .leading)) // Custom transition
}
}
.animation(.easeInOut(duration: 0.5), value: showDetailView) // Smooth animation
.onTapGesture {
// Toggle between views on tap
withAnimation {
showDetailView.toggle()
}
}
}
}
struct HomeView: View {
var body: some View {
VStack {
Text(“Home Screen”)
.font(.largeTitle)
.fontWeight(.bold)
Image(systemName: “house.fill”)
.font(.system(size: 80))
.foregroundColor(.blue)
}
}
}
struct DetailView: View {
var body: some View {
VStack {
Text(“Detail Screen”)
.font(.largeTitle)
.fontWeight(.bold)
Image(systemName: “magnifyingglass”)
.font(.system(size: 80))
.foregroundColor(.green)
}
}
}
How are you going to use it? Let me know 🙂
Happy Coding!