Animation delay and repeatForever in SwiftUI

⋅ 3 min read ⋅ SwiftUI Animation

Table of Contents

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:

Simple linear animation
Simple linear animation

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.

Repeat Forever
Repeat 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))
Repeat forever no reverse
Repeat forever no reverse

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 animation by two seconds
Delay animation by two seconds

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:

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

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.

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

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.

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

Apple Documentations


Read more article about SwiftUI, Animation, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
How to request a user's location

Learn the proper way of getting user information.

Next
Sleep sort: A sorting algorithm without compare

I can't tell it is a stupid or genius algorithm, but it sure got a beauty in it.

← Home