Animation delay and repeatForever in SwiftUI

In this article, we will explore two methods of SwiftUI Animation, delay(_:) and repeatForever(). They are quite straight forward to use, but there are some cases that you might be missing. Let's go through all of them.

Simple Animation

We will use a very simple animation as an example throughout this article. We will animate a square of 100x100 to 50x50. Here is the code to do that.

struct ContentView: View {
    @State var isAnimating = false // <1>
    
    var body: some View {
        Rectangle()
            .fill(Color.pink)
            .frame(width: 100, height: 100)
            .scaleEffect(self.isAnimating ? 0.5: 1) // <3>
            .animation(Animation.linear(duration: 1)) // <4>
            .onAppear {
                self.isAnimating = true // <2>
        }
    }
}

1 We declare @State that use to drive an animation.
2 On view appear, we start our animation.
3 We scale down our square in half.
4 We use linear animation with a duration of one second.

And here is the result:

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

Repeat Forever

To make our animation repeat, we use .repeatForever(). The default behavior of repeat forever is autoreverse, that's mean our animation will scale from 1 to 0.5 then 0.5 back to 1, creating a seamless loop of animation.

func repeatForever(autoreverses: Bool = true) -> Animation

Change .animation() in the previous example to this.

.animation(Animation.linear(duration: 1).repeatForever())            

And your animation will loop forever.

No auto-reverse

If you set autoreverse to false, the animation will scale from 1 to 0.5, then repeat from 1 to 0.5 again. You will see a jump in this kind of animation.

.animation(Animation.linear(duration: 1).repeatForever(autoreverses: false))

Delay

As the name implies, .delay(_:) will delay the caller animation by the number of seconds specified.

.animation(Animation.linear(duration: 1).delay(2))

The above code will delay the animation by two seconds. You will see the square hold still for two seconds before beginning the animation.

Delay then repeat forever

Here comes the tricky part, a combination of delay and repeat. What do you think the following animation will look like?

.animation(Animation.linear(duration: 1).delay(2).repeatForever())

As an exercise, let's take a brief moment and think about it.

The above code can be translated into this.

Repeat this animation Animation.linear(duration: 1).delay(2) forever, which can further break down into two parts, the first run, and the reverse run.

• The first run would be a scale from 1 to 0.5 with two seconds delay.
• The reverse run would be a scale from 0.5 to 1 with two seconds delay.

What you will see is a two-second pause, then an animation of square scaling down, then another two-second pause with a reverse animation of square scaling back.

Enough for an explanation, here is the result:

Repeat then delay

The last one, which is an invert of the previous one, repeat then delay.

.animation(Animation.linear(duration: 1).repeatForever().delay(2))

The result of this one might simple than you might think. If you read it out, it will be very obvious.

Delay this animation Animation.linear(duration: 1).repeatForever() by two seconds then play it. So, the result is the same as Repeat Forever, but with two seconds delay before the animation start.

Conclusion

These two simple animation methods might confuse you when it comes together. Beware when using them and make sure you put them in the correct order.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

Related Resources

Can't get enough of animation? Read more articles about SwiftUI and Animation.

• How to create Activity Ring in SwiftUI

Apple Documentations

• repeatForever(autoreverses:)
• delay(_:)