SwiftUI - Animations

---

---

Animation is a process of animating the views on the screen when the state of the views changes. It can create attractive user interfaces by visually reflecting changes in the views. So, in this chapter, we are going to learn about the basics of animation in SwiftUI.

Animation in SwiftUI

SwiftUI provides a good support to animations. With the help of animations we can easily create smooth visual transitions in the views or components or layout, when the state of the views changes. Due to the declarative approach of SwiftUI, we can animate properties such as size, color, opacity, position, etc in response to the change in state of the view.

In SwiftUI, we can create animation using the following methods −

• withAnimation(_:_:_) Method: It is used to create state-based animation. It allows you to specify the animation type and perform animation when the state variable changes its state.

• animation(:value:) Method: It is used to insert an animation to a particular view, means it automatically animates the changes to the specified views, when its state is being modified.

Type of Animation in SwiftUI

SwiftUI support the following type of animations:

• Implicit Animation: This animation provides a predefined animation for the view. So the view animates every time whenever the state change happens, it works automatically means we does not required to specify every frame of the animation. This type of animation is achieved by using .animation() method.

• Explicit Animation: It is used to create an animation that only changes the specified properties present inside the given view. We can achieve explicit animation with the help of withAnimation() method. It provides us more control over the animation.

• Animation Curves: It provides various types of animation curves such as .easeIn, .easeOut, .easeInOut, and .linear. They are commonly used to control the pacing of the animating views.

• Spring Animation: It is a special type of animation that is used to create spring motion.

• Repeating Animation: It is a type of animation which is used to create an animation that repeats a certain number of times.

• State-Driven Animation: As we known that in SwiftUI, animations are triggered by changing in the @State or other dynamic properties, so whenever the value of the state variable changes the corresponding properties of the view will updated and the transition is animated.

Benefits of Using Animation

Following are some of the key benefits we will get by using animations −

• Animation enhances the usability of the app by creating much more clear and interactive interface of the app.

• Animation provides immediate and clear response to their actions to the user and decreases any confusion.

• A well designed animations in the application can enhances user engagement.

• Animations can help developer to provide more attention on the important section of the app.

• Animation provide smoother transitions effects while moving between states.

Nested Animation in SwiftUI

SwiftUI supports nested animations with the help of withAnimation() method. Using this we can apply multiple animations to a view. Also we can create special effects by nesting two or more animations.

Syntax

Following is the syntax −

func animation<V>(_animation:Animation?,
    value: V) -> some View where V : Equatable

Example

The following SwiftUI program is used to create nested animation. Here the outer withAnimation() is responsible for scaling of the circle and inner withAnimation() is responsible for color change.

import SwiftUI

struct ContentView: View {
   @State private var scale = false
   @State private var color = false

   var body: some View {
      VStack{
         Circle()
            .stroke(color ? Color.blue: Color.red, lineWidth: 6)
            .frame(width: 160)
            .scaleEffect(scale ? 1.7 : 1.1)
            .padding(10)
         Button("Click"){
            withAnimation(.easeInOut(duration: 8.0)){
               scale.toggle()
               withAnimation(.easeInOut(duration: 1.1)){
                  color.toggle()
               }
            }
         }.font(.title2)
      }
   }
}

#Preview {
   ContentView()
}

Output

Timing Curve in SwiftUI

Timing curve is used to cutomize the speed of the animation with help of different timing stages such as beginning, middle and end. It allows use how we run to move our animation on the screen. To control the speed of the animation SwiftUI provide an in-built modifer named timingCurve(). The timingCurve() modifier animates the created animation acording to the given points.

Syntax

Following is the syntax −

static func timingCurve(
   _ p1x: Double,
   _ p1y: Double,
   _ p2x: Double,
   _ p2y: Double,
   duration: TimeInterval = 0.35
) -> Animation

Parameters

Following are the parameters −

• p1x: Represent first x-coordinate of the control point of the curve.

• p1y: Represent first y-coordinate of the control point of the curve.

• p1x: Represent second x-coordinate of the control point of the curve.

• p1y: Represent second y-coordinate of the control point of the curve.

• duration: Represent the duration of the animation in seconds.

Example

The following SwiftUI program we animate the circle according to the custom timing curve.

import SwiftUI
struct ContentView: View {
   @State private var move = false
   
   var body: some View {
      VStack{
         Circle()
            .stroke(.red, lineWidth: 6)
            .frame(width: 160)
            .offset(x : move ? 160 : -130)
            .animation(.timingCurve(0.67, -0.54, 0.28, 1.34, duration: 2), value: move)
         Button("Click"){
            move.toggle()
         }.font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

Output