SwiftUI: How to add animation to your view?

SwiftUI includes basic animations with predefined or custom easing, as well as spring and fluid animations. You can adjust an animation’s speed, set a delay before an animation starts, or specify that it repeats.

We will use the following code to test our animation.

struct ViewAnimationExample: View {
   
  @State private var showChanges = true
  @State private var degrees = 0.0
   
  var body: some View {
    VStack{
      Rectangle().foregroundColor(.blue).frame(width: 100, height: 100, alignment: .center).padding().rotationEffect(.degrees(degrees))
       
      Button(action: {
        self.showChanges.toggle()
        self.degrees += 45
      }) {
        Text("Start animation")
      }
        Circle().foregroundColor(.red).frame(width: 100, height: 100, alignment: .center).scaleEffect(showChanges ? 0.5 : 1)
    }
  }
}

We are going to add some animation by using animation(:) modifier. We will turn on animation for the Rectangle rotation by adding animation(.spring()) and scaling the circle by using animation(.spring()). Anytime when we use the animation(:) modifier on a view, SwiftUI animates any changes to the animatable properties of the view, a view’s color, opacity, rotation, size, and other properties are all animatable.

struct ViewAnimationExample: View {
   
  @State private var showChanges = true
  @State private var degrees = 0.0
   
  var body: some View {
    VStack{
      Rectangle().foregroundColor(.blue).frame(width: 100, height: 100, alignment: .center).padding().rotationEffect(.degrees(degrees)).animation(.spring())
       
      Button(action: {
        self.showChanges.toggle()
        self.degrees += 45
      }) {
        Text("Start animation")
      }
        Circle().foregroundColor(.red).frame(width: 100, height: 100, alignment: .center).scaleEffect(showChanges ? 0.5 : 1).animation(.linear)
    }
  }
}