SwiftUI

Animations in SwiftUI


We all fancy things that has animations right? So why not add animations in our own apps! In this post we are going to try our hands on Animations in SwiftUI. Let’s go!

Initial Setup

To understand the basics of animations in SwiftUI, we will create a simple Loading dots animation.

For this, we will create a Dot first:

struct DotView: View {
    var body: some View {
        Circle()
            .frame(width: 70, height: 70)
    }
}

Here, we have used a Circle to create the DotView. Optionally, Added a Frame modifier to set the frame.

Now, let’s create a LoadingView which will have 3 DotViews:

struct LoadingView: View {
    var body: some View {
        HStack {
            DotView()
            DotView()
            DotView()
        }
    }
}

Nothing fancy right? Let me show you what it looks like so far:

Initial LoadingView for animations in swiftui

Animations in SwiftUI

Now that we have the views setup, let’s work on Animation.

So what we want is a simple loading bubble animations.

If we break the animation, it basically scales each dot up and down with a calculated delay betweek the animations of each dot.

Too much chitter-chatter! Show me some code! Okay!

struct DotView: View {
    // 1.
    @State var scale: CGFloat = 0.5
    var body: some View {
        Circle()
            .frame(width: 70, height: 70)
            .scaleEffect(scale) // 2.
            .animation(Animation.easeInOut) // 3.
    }
}

Here, we added 3 things to our DotView:

  1. A State variable to manage the scale of the Dot.
  2. A Scalling Effect with the scale value stored in the State variable.
  3. An animation effect.

Pretty easy right? I know!

The LoadingView is still not animating, why?! :/

We need to animate the change in the scale, so do this update the DotView:

struct DotView: View {
    @State var scale: CGFloat = 0.5
    var body: some View {
        Circle()
            .frame(width: 70, height: 70)
            .scaleEffect(scale)
            .animation(Animation.easeInOut)
            .onAppear { // 1.
                withAnimation { // 2.
                    self.scale = 1 // 3.
                }
            }
    }
}

Here’s what we did:

  1. To initiate the animation, we chose the onAppear callback.
  2. To animate the change of scale variable, we used withAnimation block.
  3. Changed the value of scale from 0.5 to 1.

In SwiftUI, whenever you want to animate anything just put it inside withAnimation block and see the magic!

This still animates the dot for only one time. We want this to run forever!

Okay, tell this to the animation then:

struct DotView: View {
    @State var scale: CGFloat = 0.5
    var body: some View {
        Circle()
            .frame(width: 70, height: 70)
            .scaleEffect(scale)
            .animation(Animation.easeInOut.repeatForever()) // 1.
            .onAppear {
                withAnimation {
                    self.scale = 1
                }
            }
    }
}

Just tell the animator to repeat the animation forever and it’s as simple as that! Super easy!

Let’s see what we got so far:

initial loading animation in swiftui

Delay in Animations

Wait what? This does not look good. Let’s add delay

struct DotView: View {
    @State var delay: Double = 0 // 1.
    @State var scale: CGFloat = 0.5
    var body: some View {
        Circle()
            .frame(width: 70, height: 70)
            .scaleEffect(scale)
            .animation(Animation.easeInOut(duration: 0.6).repeatForever().delay(delay)) // 2.
            .onAppear {
                withAnimation {
                    self.scale = 1
                }
            }
    }
}

What we did is:

  1. Added a State variable delay to be able to modify the delay
  2. Added delay() modifier to our animation with the desired delay value.
  3. Optionally, added the duration for the animation.

Now to see how we can use this, let’s modify our LoadingView:

struct LoadingViewV1: View {
    var body: some View {
        HStack {
            DotView() // 1.
            DotView(delay: 0.2) // 2.
            DotView(delay: 0.4) // 3.
        }
    }
}

Our logic is to add necessary delay to the animations of each dots. Hence, based on the duration of the Scale animation (0.6), we added 0.2 and 0.4 seconds delay in second and third dots, respectively.

Let me show you the final output now:

final loading animation in swiftui

Smoooth! Animations in SwiftUI are easy and quick!

Checkout the full source code on GitHub.


Checkout another quick article on How To Add Splash Screen in SwiftUI.

If you want to learn how to use SwiftUI in your existing app, then you can read it here!

or If you want to learn how to use and convert your UIViewControllers in SwiftUI, then you can read it here!

Stay tuned for more posts on Animations in SwiftUI.


Like it? Share with your friends!

4 Comments

Your email address will not be published. Required fields are marked *