Create an animation similar to using the Breathe app offset Change, rotationEffect And scaleEffect

• Create a set of 2 circles, one with a +ve offset and one with a -ve offset. Note: The offset value must be equal to the radius of the circle.
  add a state variable to toggle Offset, rotationEffect And scaleEffect
• Create and add two other sets of 2 circles again with the same offset values rotationEffect with a degree that is an incremental multiple of 60
• add one scaleEffect modifier for each circle set
• toggle state variable in autoreverse animation block

We’ll start with the main scene as a ZStack, and within that ZStack, we’ll 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 Offset, rotationEffect And scaleEffect ,

We’ll fill the circle with a linear gradient with a combination of blue and white colors. startPoint And endPoint In this order [.top, .bottom] for first circle and second circle in order [.bottom, .top],

We’ll 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 below

We’ll add 2 additional circle sets to make the squares look like a flower with 6 petals. For that, we will use ForEach and iterate 2 times and give it a rotationEffect which is a multiple of 60 on each iteration.
We will also use our state variable to toggle rotationEffect Back from the current angle to its reset 0-degree angle to make it look like it’s down.

At this point, the code will look like below

To give it a more breath-taking app look, we’ll scale it down and then scale it down with the animation. For that, we’ll just use scaleEffect A modifier whose value will again be toggled with the help of a state variable. We’ll be on a scale from size 0.2 to size 1 (the starting frame size).

.scaleEffect(startAnimation ? 1 : 0.2)

we will use the above code to add scaleEffect Modifiers in our Circle Set stack.

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

animationtype = easeInOut 
repeat forever 
autoreverse = true 
speed = 0.1

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

startAnimation.toggle()

now we will toggle every second startAnimation , and with the change of startAnimation value The values ​​of other modifiers will also change.

You can find the final code below:

Final animation will be like below:

I hope you understand how we can use this rotationEffect, offset and scaleEffect To create an animation similar to the animation of the Breathe app.

Thank you for reading.