Create Breathe App-like Animation Using SwiftUI

Create an animation similar to the Breathe App using offset changes, rotationEffect and scaleEffect

Breathe App's Animation (Conversion to GIF dint go well, that's why it's pixelated 🥲)

Implementation Breakdown

• Create a set of 2 Circles, one with a +ve Offset and one with a -ve Offset. Note: The offset value has to be equal to the radius of the Circle.
  Add a state variable to toggle the Offset, rotationEffect and scaleEffect
• Create two other sets of 2 Circles again with the same Offset values and add rotationEffect with a degree which is an incrementation multiplier of 60
• Add a scaleEffect modifier to each Circle set
• Toggle the state variable in an autoreverse animation block

Create Circle Set

We will start with the main view as ZStack, and within that ZStack, we will create two circles, one with a +ve Offset and one with a -ve Offset. We will also add a state variable stateAnimation which will be used to toggle the Offset, rotationEffect and scaleEffect .

We will fill the Circle with a LinearGradient with a combination of blue and white colours. The startPoint and endPoint of the same in the order [.top, .bottom] for the first Circle and the second Circle in the order [.bottom, .top].

We will also change the opacity of the child ZStack to 0.5 for a better look and feel.

At this point, the code will look like the below

Progress 1

More Circle Sets positioned at different Angles

We will add 2 more extra Circle sets to make the intersections look like a flower with 6 petals. For that, we will use a ForEach and iterate 2 times and give it a rotationEffect which is a multiplier of 60 over each iteration.
We will also use our state variable to toggle the rotationEffect from current Angle back to its reset 0-degree angle to make it look something like below.

Progress 2

At this point, the code will look like the below

From the above code, you can see that we are multiplying the iteration value by 60 degrees. So in the first iteration, the angle will be 0 * 60 = 0, second 1*60 = 60 and third 2*60 = 120

Add Scaling Effect

To give this a more breathing app look we will scale it down and then scale up with animation. For that, we will simply use scaleEffect a modifier whose value again will be toggled with the help of the state variable. We will scale from size 0.2 to size 1 (initial frame size).

.scaleEffect(startAnimation ? 1 : 0.2)

We will use the above code to add the scaleEffect modifier to our Circle Set stack.

Set the Animation

We will animate the whole in onAppear modifier. We will add the onAppear modifier and inside the onAppear modifier we will add withAnimation block with properties

animationtype = easeInOut 
repeat forever 
autoreverse = true 
speed = 0.1

Once the withAnimation block is set we will add the code to toggle the state var which we have created like the below line of code.

startAnimation.toggle()

Now at every second, we will toggle the startAnimation . And with the change of the startAnimation value the values of the other modifiers will also change.

You can find the final code below:

The final animation will be like the below:

Final Animation

I hope you understood how we can use the rotationEffect, offset and scaleEffect to create an animation similar to Breathe App’s animation.

Thanks for reading.