This content originally appeared on HackerNoon and was authored by Vaibhav
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!
This content originally appeared on HackerNoon and was authored by Vaibhav
Vaibhav | Sciencx (2024-10-21T22:01:16+00:00) How to Create Custom Transitions in iOS 18 – #30DaysOfSwift. Retrieved from https://www.scien.cx/2024/10/21/how-to-create-custom-transitions-in-ios-18-30daysofswift/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.