Animation delay and repeatForever in SwiftUI

SwiftUI Animation

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


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 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 — entirely for free.

← Home