SwiftUI - Creating Animations

---

---

Animations are the most powerful tool to create attractive user interfaces in SwiftUI. It animates views in various ways. In SwiftUI, we can create animation in two ways: implicit animation and explicit animation. Implicit animations are those animations that automatically handle the animations whenever the state of view changes whereas explicit animations are used to create animation explicitly. So in this chapter, we will learn how to create animation implicitly.

The ".animation()" Modifier

In SwiftUI, we can apply animation with the help of the .animation() modifier. The .animation() modifier is used to apply the specified animation on the given view and the view animates whenever the value specified in the modifier changes. It is an implicit type of animation.

Syntax

Following is the syntax −

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

Parameters

This method takes the following parameters −

animation: Represents the animation we want to apply to the view. If the value of this parameter is nil, then the view does not animate. The value of this parameter can be one of the following values −

• default: It is used for default animation.

• linear: It creates an animation that moves at a constant speed.

• easeIn: It creates an animation that begins slowly but increases its speed when it reaches towards the end of the movement.

• easeOut: It creates an animation that begins quickly but decreases its speed when it reaches the end of the movement.

• easeInOut: It creates an animation that has the characteristics of both easeIn and easeOut animations.

• bouncy: It creates bounce animation.

• smooth: It creates no bounce animation.

• snappy: It creates snappy animation.

• spring: It creates spring animation.

• interactiveSpring: It creates a spring animation with a lower duration.

• interpolatingSpring: It creates a spring animation that uses a damped spring model to generate values between one to zero.

value: Represents the value which will trigger animation.

Creating Basic Animation in SwiftUI

To create a basic animation follow the following steps −

Step 1: Create a new project − To create a new project open Xcode, then create a new SwiftUI project.

Step 2: Create an animation − Now with the help of the .animation() method we will create a simple animation.

Example

The following SwiftUI program is used to create a simple animation. Here when we click on the button the size of the button will increase.

import SwiftUI

struct ContentView: View {
   @State private var size = 3.3
   var body: some View {
      Button("Click Me"){
         size += 3
      }.frame(width: 100, height: 200)
      .background(Circle().fill(.mint))
      .scaleEffect(size)
      .animation(.easeOut, value: size)
   }
}
#Preview {
   ContentView()
}

Output

Creating Spring Animation in SwiftUI

Using the .animation() modifier we can also create a spring animation. Here we pass the spring() method in the .animation() method due to which the view animates like spring.

Syntax

Following is the syntax −

func spring(
   duration: TimeInterval = 0.5,
   bounce: Double = 0.0,
   blendDuration: Double = 0
) -> Animation

Parameters

This method takes the following parameters, using these parameters we can control the spring animation −

• duration: It defines the period of oscillation of the spring.

• bounce: Defines how much the spring will bounce. Here 0 indicates no bounce, the positive value represents the increase in bounciness and the negative value represents the over-damped spring.

• blendDuration: Defines the amount of seconds over which the interpolate changes.

Example

The following SwiftUI program is used to create spring animation.

import SwiftUI

struct ContentView: View {
   @State private var size = false
   var body: some View {
      VStack{
         Rectangle()
            .stroke(.blue)
            .frame(width: size ? 200 : 100, height: size ? 90 : 50)
            .animation(.spring(duration: 0.2, bounce: 0.1, blendDuration: 1), value: size)
         Button("Click to See Magic"){
            size.toggle()
         }.foregroundColor(.red)
      }
   }
}
#Preview {
   ContentView()
}

Output

Configure Animation in SwiftUI

With the help of the following methods we can easily configure the animation −

Name	Description
delay()	It is used to delay the beginning of the animation by a given number of seconds.
repeatCount()	It is used to repeat the specified animation according to the given number of times.
repeatForever()	It is used to repeat the specified animation infinitely.
speed()	It is used to control the speed of the animation.