Skip to content

SwiftUI: Repeat Animation

Animation on SwiftUI is a lot easier to achieve than UIKit with so much more support provided by Apple. I wonder if this will be a good thing or bad thing but regardless, we need to make good use of what is provided right.

In this tutorial, you’ll learn how to perform a repeat animation in SwiftUI. 

Repeat animation is basically an animation the repeat over and over again. Pretty self explanatory. You may imagine it to have a same behaviour as a GIF which keeps repeating.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Setting up the View

You will be using RoundedRectangle here. You may choose any shape you like but for now, we will be using RoundedRectangle.

To get a head start, this is basically what you will need:

A State to know if it is animating or not.

And a RoundedRectangle embedded inside a VStack. The animation used here will be scaling the RoundedRectangle.

Repeat Forever Animation With Auto-Reverse

Repeat forever animation is the animation that keep repeating over and over again. By simply adding the following code into the RoundedRectangle, you will get the repeat forever animation.

Depending on your need, you may tweak the duration to any number less than 1 for the animation to move really fast or any number more than 1 will slow down the animation.

By default, the auto reverse is true, so as it scale big and it will reverse to it’s original position.

Repeat Forever Animation Without Auto-Reverse

The auto reverse will not reverse to it’s original position rather after scaling, it will move back to it’s original position. This then create an animation of a heart beat.

Delay Animation

Perhaps delaying the animation will fulfil the criteria of your design.

Delay then Repeat Forever Animation

The delay would be a lot of better if the animation will keep repeating itself.

Different Modifier

Beside scaling, you could even try with the opacity

Or even fill by changing the color.

Or even the frame itself.

There is lot’s of way to create an animation using different modifier. Play around with your creativity.

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *