How to create Custom Animations in SwiftUI?

I love the way animations work in SwiftUI, every tiny piece of UI we create in SwiftUI is so easy to read, and with Preview in Canvas, we can do so much more. We don’t need to wait to run applications just to test a single UI, and this also gives us an option to Live Preview our animations and modify as per our needs. Customizing Views and Animations has never been easier.

Let’s dive in with examples so that you understand better, download the starter project to follow along, or download the final project to explore.

Click Here to download the starter project.

Click Here to download the final project.

Let’s Start

Open ContentView.swift file, and click on Resume button in the Canvas, to view the Preview of our predefined content. There are eight red circles, which we are going to animate now in this tutorial.

Let’s start with the basics. Change the offset of the Circles in such a way that when we tap on the button which says “Tap to Animate”, the circles should change their y position.

Circle()
.size(width: 30, height: 30)
.foregroundColor(.red)
//	Change the Offset
.offset(x: 0, y: self.moveDown ? 200 : 0)

Click on Live Preview in the Canvas, and then Click on Tap to Animate. Notice that all the Circle moves down and then up, but there’s no animation. Let’s add animation to it.

Circle()
.size(width: 30, height: 30)
.foregroundColor(.red)
.offset(x: 0, y: self.moveDown ? 200 : 0)
// Animate with 2 seconds duration
.animation(.easeIn(duration: 2))

Again, Click on Live Preview, and then tap on Tap to Animate.

The animation we have here takes 2 seconds to complete but serves our purpose of demonstrating the type of animation. When we define the animation to easeIn, the animation will start slow and ends at a faster speed. Try looking at the animation carefully.

Similarly, if you try using easeOut, the animation will start slow and then will increase the speed towards the end. Next, if you try using easeInOut, the animation will start slow, then go fast, and then ends slowly. Try all these types of animation with a longer duration, so that it’s easy for you to determine what is happening in them.

Customizing Animation

Now, let’s look into more ways of customizing our animation. Change your animation code with the one shown below.

Circle()
.size(width: 30, height: 30)
.foregroundColor(.red)
.offset(x: 0, y: self.moveDown ? 200 : 0)
// Animate with Spring Damping
.animation(
    Animation.interpolatingSpring(stiffness: 100, damping: 4)
)

Click on Live Preview, and then tap on Tap to Animate.

Beautiful, Right?

Let’s continue customizing it more, add delay to our circles depending on the index of the circle.

Circle()
    .size(width: 30, height: 30)
    .foregroundColor(.red)
    .offset(x: 0, y: self.moveDown ? 200 : 0)
    .animation(
        Animation.interpolatingSpring(stiffness: 100, damping: 4)
            // Delay of 0.1 seconds multiplied by index of circle
            .delay(Double(index) * 0.1)
)

Live Preview

You can do more customizations like try changing the speed of the animation by adding .speed(1.5) in our code.

Have fun customizing animations, and don’t forget to let me know on Twitter.

I hope you guys enjoyed reading my article. There’s a lot more to learn together, so subscribe to stay updated about my upcoming articles.

If you have any suggestions or questions, Feel free to connect me on Twitter or Reddit. 😉