How to Repeat an Animation

#14 - With repeat count and repeat forever

Hello my SwiftUI friend,

Welcome back to the learning SwiftUI newsletter. This is post number 14, as you may have noticed there was no post last Sunday. That’s because I spent 8 days at the hospital with the family, so to be honest, I did not have the motivation to create a post last week.

But this week I am back and we will go through how to make an animation repeat itself. This is something I go through in my SwiftUI book (now with a 30% discount), you’ll find the link to it in the middle of this post.

Today I will give you two small examples, one for repeatCount and one for repeatForever. Let's start with the repeatCount.

In the view below, we have set up a text view. Once you press the text, it will toggle the repeatCount state property wrapper. Which will trigger our animation to go between a scale of 1 and 1.2 six times before it ends.

struct RepeatAnimationExamples: View {
    @State private var repeatView: Bool = false
    
    var body: some View {
        VStack {
            Text("Repeat Count = 6")
                .font(.largeTitle)
                .scaleEffect(repeatView ? 1.2 : 1)
                .animation(.easeInOut(duration: 0.5).repeatCount(6), value: repeatView)
                .onTapGesture {
                    repeatView = true
                }
        }
    }
}

You can change the repeatCount to whatever number you like and it will repeat the view for that many times and then stop. You could also go the other way and have the view repeat itself forever. All we have to do is to change the repeatCount to the repeatForever modifier. I made another example of this where we will scale different rectangles instead.

---

Want to learn more about SwiftUI animations?

I created a book for anyone new to SwiftUI that wants to develop their SwiftUI animation skills. The book cover the basics and more advance techniques to animating objects and views in SwiftUI. Start learning today and get a 30% discount by clicking the link below:

Book Deal! 30% Discount for Learning SwiftUI Animations - The Beginner Roadtrip

---

struct RepeatAnimationExamples: View {
    @State private var repeatView: Bool = false
    
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.purple)
                .scaleEffect(repeatView ? 2.6 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.green)
                .scaleEffect(repeatView ? 2.2 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.red)
                .scaleEffect(repeatView ? 1.8 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.blue)
                .scaleEffect(repeatView ? 1.4 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
        }
        .onTapGesture {
            repeatView = true
        }
    }
}

This makes for a pretty neat effect, you can experiment with different scenarios around this if you like. For example, if you don’t want the full repetition and instead only want the scale to go out and then restart. You can set the autoreverses to false instead and you will get a different behavior (this is also covered in my animations book). The code will almost look the same.

struct RepeatAnimationExamples: View {
    @State private var repeatView: Bool = false
    
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.purple)
                .scaleEffect(repeatView ? 2.6 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(autoreverses: false), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.green)
                .scaleEffect(repeatView ? 2.2 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(autoreverses: false), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.red)
                .scaleEffect(repeatView ? 1.8 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(autoreverses: false), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.blue)
                .scaleEffect(repeatView ? 1.4 : 1)
                .animation(.easeInOut(duration: 1).repeatForever(autoreverses: false), value: repeatView)
            
            Rectangle()
                .frame(width: 100, height: 50)
        }
        .onTapGesture {
            repeatView = true
        }
    }
}

That was it for this week, if you want to learn more about animations. You can always check out my book by clicking the link in the middle of the post and you’ll get a 30% discount. 

Have a nice day friend!

Mr SwiftUI