DEV Community

Cover image for Custom Transitions in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

Custom Transitions in iOS 18 - #30DaysOfSwift

Day 10: Smooth as Butter Transitions ๐ŸŒ€

In the tenth post of #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.

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)
        }
    }
}

Enter fullscreen mode Exit fullscreen mode

How are you going to use it? Let me know :)

Happy Coding!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
๐ŸŽฅ Audio/video file upload with real-time preview
๐Ÿ—ฃ๏ธ Advanced transcription with speaker identification
โญ Automatic highlight extraction of key moments
โœ๏ธ AI-powered article draft generation
๐Ÿ“ค Export interview's subtitles in VTT format

Read full post

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

๐Ÿ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay