SwiftUI - Using Multiple Animation

---

---

In SwiftUI, we are allowed to animate multiple properties such as scale, opacity, rotation, etc. of a view simultaneously. Here we wrap multiple state changes for multiple properties in the same modifier either in .withAnimation() or in .animation(). Both these modifier works will with single or multiple animations. Using these multiple animations we can also create various effects for all types of views.

Multiple Implicit Animations in SwiftUI

We can animate multiple properties implicitly by using .animation() modifier with each property. It animates the specified property when they change states.

Example

In the following program, we apply two implicit type animation to the ellipse. So when we click on the button the ellipse start increase its sizw while rotating simultaneously.

import SwiftUI

struct ContentView: View {
   @State private var scale = false
   @State private var rotate = false
    
   var body: some View {
      VStack{
        Ellipse()
            .fill(.orange)
            .frame(width: 100, height: 110)
            .rotationEffect(.degrees(rotate ? 260 : 0))
            .scaleEffect(scale ? 3 : 1)
            .animation(.easeInOut(duration: 1), value: scale)
            .animation(.easeIn(duration: 1), value: rotate)
        
          Button("Click Me"){
             scale.toggle()
             rotate.toggle()
            }.font(.title2)
        }
    }
}
#Preview {
   ContentView()
}

Output

Multiple Explicit Animations in SwiftUI

We can animate multiple properties explicitly by using .withAnimation() modifier, where the closure of this modifier contains all the state changes for the specified properties.

Example

In the following program, we animate the text "TutorialsPoint" using two different animations that is rotate and moving. Here when we click on the button, the text move in right direction and after 1 sec it start rotating.

import SwiftUI
struct ContentView: View {
   @State private var move = false
   @State private var rotate = false
      
   var body: some View {
      VStack{
         Text("TutorialsPoint")
             .font(.headline)
             .foregroundStyle(.red)
             .bold()
             .rotationEffect(.degrees(rotate ? 260 : 0))
             .offset(x: move ? 150 : 0)
                  
         Button("Click Me"){
            withAnimation(.easeIn(duration: 1)){
               move.toggle()
         }
         withAnimation(.easeOut(duration:1).delay(0.5)){
            rotate.toggle()
            }
         }.font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

Output

Animating Multiple Views in SwiftUI

In SwiftUI, we are allowed to animate multiple views simultaneously with the help of both .animtion() and .withAnimation() modifier. We can either use the same state change variable or different variables for the views. Now let us discuss how we will animate multiple views with the help of the following example.

Example

The following SwiftUI program animates two views that are Rectangle view and the Text view. Here both the views uses same state changing variable and these states are controlled by .withAnimation() modifiers. The scaling effect is applied to Rectangle view and rotation effect is applied to Text view.

import SwiftUI

struct ContentView: View {
   @State private var myState = false    
   var body: some View {
      ZStack{
         // Animating rectangle view
         Rectangle().fill(.yellow).frame(width: 150, height: 50)
         // Here we apply scaling effect on the rectangle
         .scaleEffect(myState ? 0.8 : 2)
            
         // Animating Text View
         Text("TutorialsPoint").font(.largeTitle).foregroundStyle(.green)
         // Here we apply rotation effect on the text
         .rotationEffect(.degrees(myState ? 360 : 0))
        }.padding(30)
       
        Button("Click Me"){
           withAnimation(.easeInOut(duration: 1.4)){
                myState.toggle()
            }
        }.font(.title)
    }
}

#Preview {
   ContentView()
}

Output