SwiftUI - Transition

---

---

Transitions are the special effects that are applied to a view when a view is inserted or removed from the view hierarchy. Or we can say that, they are commonly used to determine how a view enters or exits the screen. They are just like the transition effects we applied in the beginning and ending of the video.

Transitions can applies to those views that responds to state changes, means they can only animates when they are attached with the animation, they cannot work with those views that changes its properties while remaining visible on the screen. In this chapter, we are going to learn how to apply transitions, different type of transitions and much more about transitions.

The ".transition" Modifier in SwiftUI

The .transition modifier is used to attach a transition to the given view. When the specified view is appear or remove from the screen at that time transition will applied.

Syntax

Following is the syntax −

func transition(_ t: AnyTransition) -> some View

It takes only one parameter that is the type of transition we want to apply on the view. Its vale can be: .opacity, .identity, .move, .offset, .push, .scale, .slide, .asymmetric and .combine.

How to Apply Transition in SwiftUI

To apply the transition effect on the view we have to follow the following steps −

• Step 1: Create a state variable to control the appearance of the view.
• Step 2: Use if or switch states to add or remove view according to the given condition.
• Step 3: Apply .transition() modifier to the view which we want to animate.
• Step 4: Wrap the appearance of the view in an animation, commonly used in withAnimation().

Example

In the following SwiftUI program, we apply blurReplace transition effect on the Text view.

import SwiftUI
struct ContentView: View {    
   @State private var myState = false    
   var body: some View {    
      ZStack{            
         Circle().fill(.indigo).frame(width: 250, height: 250)
         if myState{
            Text("TutorialsPoint").foregroundStyle(.white)
            .font(.largeTitle).transition(.blurReplace)
         }
      }.padding(30)
      Button("Click Me"){
         withAnimation(.default){
            myState.toggle()
         }
      }.font(.title)
   }
}
#Preview {
   ContentView()
}

Output

Type of Transition in SwiftUI

In SwiftUI, we use the following built-in transitions to animate the appearance of the view −

• Identity Transition: It is the default transition. It display the view simply without any special transition.

  transition(.identity)
  

• Move Transition: This transitions moves the sub-view away or towards the given edge of the parent view. It can work in multiple directions such as top, buttom, leading, and trailing.

  transition(.move(edge:.top))
  

• Offset Transition: This transition animates the view by moving it to the given offset value.

  transition(.offset(x:1.1, y: 2.2))
  

• Opacity Transition: This transition applies fade in and fade out effect on the given view.

  transition(.opacity)
  

• Push Transition: This transition animates the insertion of the view by moving it in to the specified edge while fading in and animates the removal of the view by moving it out towards the opposite side of the specified edge(such as top, button, trailing, and leading) while fading out the view.

  transition(.push(edge:.top))
  

• Scale Transition: This transition increases the size of the view while entering and decrease the size of the view while leaving the screen. We can also control the position from where the transition begins using the anchor parameter.

  transition(.scale(scale:23, anchore:UniPoint(x:2, y:1)))
  

• Slide Transition: This transition moves the view from left to right. Or we can say the it insert the view while moving it to the leading edge and removes it by moving out to the trailing edge.

  transition(.slide)
  

• Asymmetric Transition:This transition allows use to create composite transition that means a view that uses different transitions for insertion and removal.

  transition(.asymmetric(insertion:.slide, removal:.scale))
  

• Blur and Replace Transition:This transition allows use to animate the begining and removal of a view by mixing the blur and scaling effects with each other.

  transition(.blurReplace)
  

• Symbol Effect Transition:This transition applies defualt symbol effect on the symbol images while inserting and removing from the view. It only works with symbol images.

  transition(.symbolEffect)
  

Example 1

In the following SwiftUI program, we apply slide transition to the Text view.

import SwiftUI

struct ContentView: View {
   @State private var anime = false
   var body: some View {
      ZStack {
         Circle().fill(.indigo).frame(width: 250, height: 250)
         if anime {
            Text("TutorialsPoint")
               .foregroundStyle(.white)
               .font(.largeTitle)
               // Applying slide transition on the text view
               .transition(.slide)
         }
      }.padding(30)

      Button("Click Me") {
         withAnimation(.default) {
            anime.toggle()
         }
      }
      .font(.title)
   }
}

#Preview {
   ContentView()
}

Output

Example 2

In the following SwiftUI program, we apply push transition to the Shape view.

import SwiftUI
struct ContentView: View {
   @State private var anime = false
   var body: some View {
      VStack {
         if anime {
            Circle().fill(.indigo).frame(width: 250, height: 250)

               // Applying push transition on the shape view
               // Here the shape will appear from the top of the view
               .transition(.push(from: .top))
         }
      }.padding(30)

      Button("Click Me") {
         withAnimation(.default) {
            anime.toggle()
         }
      }.font(.title)
   }
}

#Preview {
   ContentView()
}

Output

Combining Transition in SwiftUI

In SwiftUI, we are allowed to combine multiple transitions to create a new effect. This can achive by using .combine as a parameter inside the .transition() modifier.

Syntax

Following is the syntax −

func transition(.combine(with: AnyTransition)) -> some View

The value of with parameter can be: .opacity, .identity, .move, .offset, .push, .scale, .slide, .asymmetric, .combine, .blurReplace, and .symbolEffect.

Example

In the following SwiftUI program, we apply push transition to the Shape view.

import SwiftUI

struct ContentView: View {
   @State private var anime = false
   var body: some View {
      ZStack {
         Rectangle().stroke(.indigo, lineWidth: 5).frame(width: 250, height: 100)
         if anime {
            Text("TutorialsPoint")
               .foregroundStyle(.indigo)
               .font(.largeTitle)
               .transition(.push(from: .leading).combined(with: .scale))
         }
      }.padding(30)
      Button("Click Me") {
         withAnimation(.default) {
            anime.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

Output