SwiftUI - Custom Transition

In SwiftUI, transition are used to animate the entrance and exit of the view from the screen. Apart from using built-in transitions, we are allowed to create our custom transitions. So in this chapter, we are going to learn how to create custom transitions with the help of examples.

Step to Create Custom Transition in SwiftUI

To create a custom transition in SwiftUI we have to follow the following basic steps −

• Step 1: We have to first create a ViewModifier, it is used to represent transition at any of its states. Or we can say that it is used to create a modifier that we can apply to any view.

• Step 2: Then we have to create AnyTransition extension, it uses .modifier(active:identity:) to get a transition present between the active and identity modifiers.

• Step 3: Now we are ready to apply our transition on the views with the help of the transition() modifier.

Example 1

In the following SwiftUI program, we create a custom transition that controls the appearance and removal of the view to/from the screen.

import SwiftUI

// Modifer that adjust the opacity
struct CustomModifier: ViewModifier{
   var Opacity: CGFloat
   func body(content: Content) -> some View {
      content.opacity(Opacity)
   }
}

// Defining custom transition
// Here we control the opacity of the view
extension AnyTransition{
   static var myTransition: AnyTransition{
      .modifier(
         active: CustomModifier(Opacity: 10.5), identity: CustomModifier(Opacity: 14.5)
      )
   }
}
struct ContentView: View {    
   @State private var myState = false    
   var body: some View {
      HStack{
         if myState{
            RoundedRectangle(cornerRadius: 10).fill(.red)
            .frame(width: 150, height: 100)
            // Here we apply customize transition to the shape
            .transition(.myTransition)
         }
      }.padding(30)
       
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

Output

Example 2

In the following SwiftUI program, we create a custom transition where the shape of the Rectangle is changed in the capsule while

import SwiftUI

// Modifer that adjusts the shape
struct CustomModifier<T: Shape<: ViewModifier{
   let shape : T
   func body(content: Content) -> some View {
      content.clipShape(shape)        
   }
}
// Defining custom transition
extension AnyTransition{
   static var myTransition: AnyTransition{
      .modifier(
         active: CustomModifier(shape: Capsule(style: .circular)), identity: CustomModifier(shape: Capsule(style: .circular))
      )
   }
}
struct ContentView: View {
   @State private var myState = false    
   var body: some View {    
      ZStack{
         Rectangle().fill(.green).frame(width: 100, height: 90)
         if myState{
            Capsule().fill(.blue).frame(width: 150, height: 100)
            // Here we apply customize transition to the shape
            .transition(.myTransition)
         }
      }.padding(30)       
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

Output