SwiftUI: Create Breath Animations for Relaxation | Amos Gyamfi | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SwiftUI: Create Breath Animations for Relaxation

teacher avatar Amos Gyamfi, Designing UI, Animations & Interactions

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (1h 20m)
    • 1. Project 1: Creating a Calming Breath Animation for Apple Watch

      6:57
    • 2. Project 2: Breath Animation for Relaxation

      0:37
    • 3. Tour of the project

      0:48
    • 4. Creating the project asset

      3:07
    • 5. Layout of views

      3:06
    • 6. Trimming and dashed strokes

      3:56
    • 7. Composing the flower shape

      5:51
    • 8. Color as view and text as overlay

      3:26
    • 9. Creating elevation with shadow

      1:30
    • 10. Animation states

      2:16
    • 11. Animating text with opacity

      4:24
    • 12. Animation easing

      4:35
    • 13. Playing animation automatically

      2:06
    • 14. Animating trimpath

      5:12
    • 15. Animating rotation

      5:39
    • 16. Animating scale

      2:22
    • 17. Animating shadow

      2:15
    • 18. Animating hue rotation

      2:46
    • 19. Designing Fine-grained, Relaxing and Stunning Breathe Animation: Introduction

      1:10
    • 20. Creating breathe-in and breathe-out text animations

      6:17
    • 21. Stunning breath animation: Animating scale, rotation and blend-modes

      10:42
    • 22. Calmbreath

      1:06
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

19

Students

--

Projects

About This Class

3f729f69

This SwiftUI animation class is designed for students who want to learn animation and motion with SwiftUI. The class consists of 16 videos that show you different SwiftUI animation techniques. 

In this class, you will create a beautiful breath animation using SwiftUI in Xcode. At the end of this class, students will understand the core concepts of animation in SwiftUI and know how to design and create animations using SwiftUI. Students of this class will be able to accomplish the tasks below at the end of the course: 

  1. How to create an animation asset in Sketch
  2. How to import animation assets to the asset folder in Xcode
  3. How to draw, trim a shape view, and how to turn a shape view into a dashed stroke
  4. How to compose images to form a flower shape
  5. How to use color as view and text as an overlay
  6. How to apply shadows to create elevation
  7. Understand animation state variables
  8. How to animate opacity
  9. Understand easing functions
  10. How to play animation without user interaction
  11. How to animate scale
  12. How to animate rotation
  13. How to animate shadows
  14. How to animate Hue rotation. 

Not only the above, but students will also understand animation concepts such as easing, reversing animation, repeating animation, delaying animation, and more...

Getting comments and feedback from the teacher and other students

Students can get feedback and comments from the teacher by sharing their finished projects through the Skillshare learning community. 

Project requirements

The project requires Xcode 11 or 12 and macOS Big Sur or Catalina. Students can also use the design tool of their choice (Sketch or Figma) to create an animation asset. 

  1. Xcode 12: https://developer.apple.com/xcode/
  2. macOS Big Sur: https://www.apple.com/macos/big-sur/ OR Catalina: https://support.apple.com/downloads
  3. Your favorite design tool: Sketch: https://www.sketch.com/ OR Figma: https://www.figma.com/

Meet Your Teacher

Teacher Profile Image

Amos Gyamfi

Designing UI, Animations & Interactions

Teacher

I am teaching how to design iOS interfaces and animations using SwiftUI. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Project 1: Creating a Calming Breath Animation for Apple Watch: Hi. In this video, we learned to create this column in brief animation using Swift July. So let's get started. In this project, you can see we are using the Apple watch template. When we resume. You're going to see there is no animation. So we are going to use animation to animate the circle. Before we do that, let's click the container Holden, the circle. You can see over here. This is a single circle on do we use for each to repeat six copies of this circle? The circle you see on this screen is rectangular gradient. We use a circle to clip the rectangular gradient. When we comment this line, you're going to see we have a rectangular gradient with the repeated copies. So we're going to use scale effect and rotation effect to create the brief animation. To create the brief animation, we have to use a state variable to switch between the breath in and breath out states. We do that by using this state variable offset copies. So reacquaint to add animation to the container holding the circle. That is this, this doc, we solid disease duck and go to the Creusa. Let's add the rotation effect. By using the rotation effect modifier. We can use radians or degrees as the angle. Let's use degrees. Then reset the angle. Let's set it to 0 for the moment and remove the uncle because we don't need it. The next property we will animate is the skill effect. So we add also skill effect modifier and set the value to one. The next tend to do is to set how we want this animation to be triggered. You can trigger animation in Swift UI using user interaction. Or if you want this animation to play automatically, you can use the own appear modifier. So let's add the on IBM modifier. Inside the honor Pierre modifier, we add this state variable we created over here. So let's copy that and paste inside the owner be a quantifier. And toggle is fairly. Then we attach also there animation modifier above the owner PM modifier. After Arden de animation modifier, we have to also set that isn't fashion less right? An emission. Uncertainty isn't. Over here. We're going to use is in, out. So let's go through the list and select is in out, the one with the duration. For the animation duration, let's set it to four seconds. After art into animation modifier, we have to use the state variable to animate the rotation effect value and also the skill effect for early. We do that by using a tannery conditional operation and sit two values for the condition. So let's copy the state variable over here. And inside the rotation effect, where we have the angle set to 0, we pissed distinct for L1 and write question mark. So using the tunnel re conditional operation, we have to set the true value and also a default value. So when the condition is true, let's set the rotation. An uncle of 120 degrees. And when the condition is false, we set the rotation angle to 0. Then we go to the skill if at less, also remove the Farley and paste the state variable. And window condition is true. We are going to use the actual size of the circles. That is one. We are going to scale the circle to a smaller value. For example, 0.2. For now, we can click on this icon to preview the animation. Let's stop it and click again to preview one small. So we have successfully created the brief animation using the skill, effort and the rotation effect. We want this animation to be a looping animation. So let us see how we can repeat this animation using the repeat forever modifier. We aren't they repeat forever modifier after the isnt fashion. So over here, let's add the repeat forever modifier. You can choose the default one or choose the one with auto reverses parameter. Let's select that one. You can assert order reverses to true or false. When we set it to true. When the animation, as we also refers to the beginning. So let's set it to true. So after the animation ends, we also want to add a delay at the end of the animation. Let's also add a delay at the end of each iteration. We can add the delay into ways. We can attach it after, repeat forever modifier, or just added after the isn't function. When we add the delay after the repeat forever modifier, this animation is going to repeat all the wires. But when we add the delay after the isn't function, definition is going to delay at each iteration. So just after the ease in outfile JSON, lets add a delay and set the deliver value to one. So at each iteration of this animation, we are going to delay for 1 second and also study again. So you're going to see the animation widths for 1 second before it goes back again and repeats. So this is how to create a column in pref animation here inside Swift July. 2. Project 2: Breath Animation for Relaxation: Hi, welcome to my course, SwiftUI, breath animation for relaxation. My name is Amos. I have been experimenting with SwiftUI for a very long time. And I am so excited to show you how to create beautiful and organic animations using SwiftUI. The purpose of this course is very simple. We draw a single circle in Sketch, apply a gradient on the circle, and export the circle into Xcode and create this beautiful and organic breathing animation using SwiftUI. So let's get started. 3. Tour of the project: Before we begin, this is a preview of what we are going to design and build using SwiftUI. You can see over here the animation has text animation for the breathe in and breathe out animations. There is also a trimming animation for the circle. The next is the flower shape, which consists of two kinds of animations, rotation and scale animations. So the purpose of this course is to create this same animation using SwiftUI by importing a single circle from Sketch. In the next video, I'm going to show you how to bring the asset from Sketch arrange it in Xcode and use it to create this animation. So see you in the next video. 4. Creating the project asset: Hi, as I said in the introductory video, we need only a single asset to create this animation. Let's see how to draw that in sketch. I'm going to press O, on the keyboard to bring the oval tool, I will press Shift and drag to draw a circle. In the inspector, I'm going to change the width to a 120 and press enter. With that done, I will select the circle. And go to the inspector again. I'm going to change the fill and select a gradient. I will select the top gradient, and use the color picker to sample the mint color, which is the green color. I'm going to select the one below, the gradient at the bottom. Choose the color picker and sample a color from the medium blue color, like so. With a circle selected, let's click the lock icon to make the width of the circle independent of the height. Let's click inside the width and divide it by 2. With that selected, let's press enter to go into vector editing mode. I am going to double-click the top. And also double-click the bottom so that we get this leaf-like shape. Here, inside Sketch. I'm going to select the shape. Go to the inspector again and click this plus icon, make exportable. Here, I'm going to leave the format as PNG and select a export selected. I'm going to save this on a desktop and rename the file as flower. And it click save. Next, I'm going to show you how to bring this into Xcode. You can drag and drop the asset we just created into Xcode. Here in Xcode, we go to the assets folder. You can see I have already imported that asset, but the one that we just created, you can just drag and drop it inside Xcode. So now, I'll go to the desktop and drag the asset and bring it to the Xcode assets folder. If I release the mouse, you can see I have it renamed as flower1. So this is how you can bring the asset into the Xcode assets folder, I will select it again and delete it because we don't need that one. In the next video, I'm going to show you how to layout the views using stacks before we create the animation. So see you in the next video. 5. Layout of views: Hi. In this video, we take a look at the layout of the views in this project. You can see over here, I have VStack which contains all the views. In this project. That is the main container holding all in all the views. That text views, the circle, the flower shape and also, the end button. I have divided the project into two files. The first is the details view. If I go to the preview and click on the pin preview, you can see over here that the details view contains only the text views. And the parent container for the details view is VStack, which arranges its children vertically. So you can see the first text over here, just breathe, and then conquer the anxiety of life. Which is the second text. The third text, the fourth, and also breathe in and breathe our text. Let's go back to contentView. As I said before, the parent container for all the views is this VStack. The flower shape is contained in the VStack, which allows you to put one content in front or the back of another content. All the text are contained in the details view, and then the flower content is contained in contentView.swift. If you look at this section, you can see we are calling details view. By writing details view, over here, we are pulling the content from details view into contentView.swift. As you can see from the preview, a semicircle is blocking the text. Below details view, we can add a spacer in order to pull the content away. A spacer is used to push content to the edges of the screen. If we use the spacer inside VStack, as you see over here, we push the content to the top, or to the bottom of the screen. If you use the spacer in an HStack, we push the to the left or the right of the screen. For example, if we want to push all content down, we can copy this spacer by pressing Command and C, and go to the beginning of the VStack, which contains all the views in this project and press Command + V. And with that, we push the content from the top. So that we have this around the center of the screen. In the next video, we are going to take a look at how to draw the quarter dotted circles. So see you in the next video. 6. Trimming and dashed strokes: Hi. In this video, we take a look at how to draw the semicircle. It consists of two parts. The first part is a quarter dotted circle, which is the one on the left. And the next is the one on the right, which is also a quarter dotted circle. To create this involves two things. We trim the circle and also convert the circle into a dashed line. Let's see how this works visually by going to Sketch. In Sketch, I'm going to press O, to bring the oval tool with a circle selected. I'll go to the toolbar and select the scissor tool. With that activated, We can hover any part of the circle. By clicking, we're going to cut the unwanted parts. I'll press escape in order to release the tool. The semicircle, still selected. I'll go to the inspect. Now, we know how to trim it works. So let's change this to a dashed line. Here, we are going to enter any value, for example, 6 and press enter. And that divides the circle into dashed lines. By increasing the value, you can see we are also an increase in the gap. So this is how to trim and also, convert a circle into a dashed line. Let's apply the same concept in SwiftUI in order to get the quarter dotted circles. In SwiftUI, we use the trim modifier. In the same way as I used the scissor tool. It has two properties, "from" and "to". The "from" value is the stroke-start. While the "to" value is the stroke-end. For example, if I change this value to 1, you can see we have a complete dotted circle. I'm going to press Command Z to undo the change. So we use the "from" value and the "to" value to cut part of the stroke. You can see over here, the remaining part is 1 fourth of the whole circle. So in SwiftUI, we use the trim modifier to trim the part of a circle you do not need. To convert the stroke into a dashed line. We use a stroke modifier and also enter some values for the dash property. If I change this value, for example, 1 and change this also to 1, you can see we do not have the dotted line anymore. I'm going to press Command Z to undo the change, the same with the one on the left. If I go to the stroke modifier and change the dash property values to 1. You can also see the one on the left doesn't have the dash lines anymore. I'm going to press Command and Z to undo the change. So let's recap. We use the trim modifier to cut part of the stroke we did not need. And also use the dash property of the stroke to set the dash we want to apply on the circle. So this is how to create the quarter dotted circle, the one on the left and the one on the right in this project. In the next video, I'm going to show you how to compose the flower shape you see in this video. So see you in the next video. 7. Composing the flower shape: Hi. In this video, we'll look at how the flower shape is composed. When we go to the assets folder, you can see we have only one flower view. Let's go back to contentView. I created one image view that is the one in the middle. First, let's remove this view. You can see over here it is the one that is in the middle. Let's go to the next and also remove that. You can see that one is the immediate left of the middle view. I'm going to undo to bring it back. The next is the one that is immediate right, of the middle view. That is this one over here. The one on the left, which is far from the middle is indicated here as left. And the one that is far from the middle and the right is indicated here as right. You can see apart from the middle one, All the other 4 views are rotated. Let's take a look at the one on the left. I added a rotation effect modifier to the view and set the anchor point to the bottom. In SwiftUI, when you create a new view, the anchor point is positioned at the center, but you can change the anchor point to different locations of the view. To illustrate how the anchor point works, visually, let's open Kite Compositor(https://kiteapp.co/). And take a look at the anchor point concept. When you create a new view, you can see here we have this circle at the center of the rectangle. That is the anchor point position. When we go to the inspector, we can move the anchor point to any location we want. Such as the left-center, or the top-left. Now, when we try to rotate this view, you can see it is rotating at the top left corner. Let's move the position of the anchor point again to the center. And rotate it now. You can see the view is now rotating at a center. I'm going to move it to the bottom center and rotate it again. So this is how the anchor point works visually. The anchor point is the location of the view where you want transformations such as rotation or scale to occur. Now, let's go back to Xcode and see how to move the anchor point. When you create a view, even without the anchor point parameter, the view's anchor point is located at the center. We're going to create that by bringing a comma anchor. The anchor point takes a unit point. So we can use .center. That means that the view's anchor point is located at the center. We can change this also, to the top. We can also change it to the left or right. Here we specify .leading, which is the left or the right. By indicating .trailing. So this how you can move the anchor point. I'm going to change it back to the bottom. With the one which is immediate left of the middle, we set the rotation angle to -25. Let's remove the whole of this, that is used in the animation. So we can remove it now and write 0. You can see we don't have the view anymore. I'm going to write -25. And that is rotated at the bottom at an angle of -25. I'm going to press Command Z to undo the change. The same thing applies to the one on the right. But now, instead of rotating this view at an angle of -25, we rotate it at an angle of 25. If I remove the whole of this and write 25, You can see we don't have any change. Let's remove that and right 0. And that one is also gone. I'm going to press Command Z to undo the change. We've done one which is far left. We rotated at an angle of minus 50. The one on the far right, which is this view, is also rotated in opposite direction to the one on the left. So here we have -50 and with that, we rotate this at an angle of 50. If we remove the whole value and right 0, You can see it is also gone. So this is how the flower shape is composed in this project. We create one image, which is the middle. Then rotate all the other images to a certain angle, like shown over here. In the next movie, we will be looking at how to add color as a view to create this button, and also how to add a text as an overlay. So see you in the next movie. 8. Color as view and text as overlay: Hi, the purpose of this video is to create a button below the flower so that we can use it to stop the animation. To do that, we can do that in several ways. We're going to use color as a view and also use an overlay to put a text on the. To bring the color view. We go to the object library and search for color. We can drag the color view directly to the code. That creates a rectangle which takes the whole width of the screen. We're going to change the color and also the size of the color view. I'm going to select all these values, delete, and start to write "literal" and press enter. That creates a color literal. So now, the color view has changed from gray to white. By double-clicking on the color literal, that opens the color picker. We want to specify our own color. In that case, we need to click other. The HEX color value, we change it from white and write 7777. And press Enter. And now, we have a gray color. We're going to use this as a button. So we need to specify the size of the button by using the frame modifier. We can indicate the width and height of the button. Let's set the width to 92. And the height to 46. We can go further by rounding the corners of the view using the corner radius modifier. We're going to set the corner radius to 1/2 of the height. So we divide 46 by two and that is 23. Now we have the corners of the button rounded. Next, We're going to put a text at the center of this button by using .overlay. Overlay means put in front. When we put an overlay on this color view. Any view that is embedded in the overlay will be put in front of this color view. Let's bring the overlay of modifier by writing overly, You can specify any view as an overlay. We're going to use text or rectangle, circle or even, a stack, this write text. Let's write "End" over here. And with that, we have this color view with an overlay that creates a button. The contrast between the text and the background is very low. So let's set the opacity of the color view to 50. And the 0.5. we have now created a button that will be used to stop the animation using color as a view and text as an overlay. In the next video, we shall be looking at how to create elevation using shadows. So see you in the next video. 9. Creating elevation with shadow: Hi. In this video, we look at how to add elevation two views using shadows. When you take a look at a flower shape, you can see it looks flat. Let's add shadows to the container holding the whole flower shape so that the edge of each leaf is shown. The ZStack, you see over here, is the parent container holding all the flowers. To make the edges of each of the leaves shown. We can add a shadow to each other views. Or we look at the parent container and add the shadow once. Let's locate where the ZStack, the parent, ends. That ends over here, we can add the shadow directly to the parent container. Let's write .shadow. And what we need to do is to specify the radius of the shadow. Let's leave it as one. And now you can see the edges of each of the views is shown. If I put a comment on the shadows modifier, you can see the shape now looks flat again. Let's remove it. So this is how you can add elevation to views using shadows. In the next video, we will start animating the views. So see you in the next video. 10. Animation states: Hi. In this video, we'll look at what is a state variable. In order to animate anything in SwiftUI, you need to change it over time. To change anything over time, you have to use a state variable. These state variables are those stated over here. For example, let's go to details view. Here we have 2 texts, breathe out and breathe in. Let's put a comment on breathe out. We're going to use breathe in to show how the state variable works. To animate anything, you need a state variable to change it from one state to another state. On this screen, we have defined the state variable over here. Breathe in. When we come to the text, breathe in, you can see we are using the state variable to animate the opacity. So here we set the initial state of the animation to 0 and a final state of the animation to 1. You can see from the preview that this animates from 0 to one. To recap. To animate anything in SwiftUI, you have to change it over time. And to change anything of a time, you have to create a state variable that is defined over here. In this example, we are using the state variable to animate the opacity of the text. And that changes from 0 to 1 using a ternary conditional operator. Let's go back to contentView, All these state variables and animate each of the animatable views. For example, the first state variable grow is used to animate the middle view that scales it from 0 to 1. Rotate far right is used to animate the view which is far right from the middle view and rotate far left is used to animate the view which is far left from the middle view. In the next video, I'll be showing you how to animate each of the views. So see you in the next video. 11. Animating text with opacity: Hi, in this video, we'll look at showing and hiding text using opacity animation. What we are going to do is shown in the preview. You can see it there is this breath in text and breath out text. Anytime the breath in text is shown, the breath out text is hidden. When the breath out text is shown, the breath in the text is hidden. Let's see how to create that. You can see over here, I have defined two state variables, breatheIn and breatheOut . The state variables are used to change the animation state from one form to another. So you have to specify the initial state of the animation and the final state of the animation using the state variable. Let's look at how this concept works using a timeline animation in Kite Compositor. Here I have created a text. Let's add animation to this text so that we show and hide it using opacity animation. So the state variable I showed in SwiftUI works in the same way. You have to state the initial state of the animation and the final state of the animation. And the animation property we are interested in is not the bounce, but the opacity. Let's check the "from" and the "to" value. The initial state of the animation. We set it to 1. And the final state of the animation, we set the opacity 0. So now when we go to the timeline and drag the playhead, you can see at the initial state we have the opacity set to 1. As I drag the playhead to the final state, you can see the text is hidden. That is when opacity is set to 0. We can use the same concept to animate the view in SwiftUI by setting the initial state of the animation and a final state of the animation using the state variable. With the breatheIn state variable, We the value to true. So you can see it is shown even when the animation hasn't started, We set the breatheOut to false. So when the animation hasn't started, we don't see the breath out text. Let's change it to true. You can see over here, now, the breath in text overlaps with the breath out text. Let's press Command Z to undo the change so that it is set to false again. When we come over here, you can see the two texts, breathe out and breathe in, are contained in ZStack. That is why the overlapping occured. So here, you can see we are using the state variable breathOut to animate capacity from 0 to 1 using a ternary conditional operation. And since the initial state is set to false. Now, this animates in the same way as the breatheIn But here, when the breath in text is shown, the breath out text is hidden because of the initial state defined over here. When we take a look at a breath out text, you can see it's shown immediately. But the breath in text scales in. Let's look at the breath in. There is also this one scaleEffect attached to the text and is using the same state variable, we're also scaling this value from 0 to 1. That is why it scales in as the opacity is set to 1 and scales out when the opacity is 0. So this is how this animation is done and with that, we show and hide the text creating this breathe out and breathe in animation. In the next video, we shall look at how to ease animations. So see you in the next video. 12. Animation easing: Hi. In this video, we'll look at acceleration and deceleration in animation. known as easing function. If you look at this animation. The one that animates the breath out text. And the one that animates the breath in text. You can see over here, we have easeInOut and also we have easeOut. This is an easing function. We use the easing function to make an animation, decelerate, or accelerate. For example, in this situation, if we want this animation to undergo a constant speed, we're going to change the animation function from easeIn, Out and select Linear. Let's do the same thing with the breath in text. We change it from easeInOut to linear. And with that, we tell the animation to undergo a constant speed or constant velocity. You can now see that this animation is not as smooth as when we had the easeInOut. For animation that shows back and forth, The best and smoother easing function is to use, easeInOut. You can also change it to use something like easeIn or easeOut. But easeIn and easeOut are not as smooth as easeInOut. So in this animation, the most suitable is in function, is the easeInOut, not easeIn or easeOut. I'm going to press Command Z to undo the change. Let's look at the parameters for the easing function. We have duration. That is the total time for the animation to take place. There is also a delay, which defines how long the animation should wait before it starts. We can make animation play at a certain iteration. For example, we can play the animation at once, two or more. If we want the animation to play forever, we use the modifier, repeat forever. And that also takes another parameter, all autoreverse. We use autoreverse to make animation reverse to the start when it ends. Let's look at how this concept works. using a timeline animation in Kite Compositor. In the previous video, I showed how to create this animation, which is an opacity animation. If I drag the playhead in the timeline to the end, you can see this animates from 1 to 0 opacity. Now, let's play this animation. You can see at the end, we don't see that text anymore. Let's drag the playhead back to the initial state and to check autoreverse and play the animation again. And in the end, we still come back to where the text is in the initial state, like that. So when we set autoreverse to true, when the animation as we move to the initial state. Here you can see we have set autoreverse to true. There is also another value. We can also set it to false. Let's change it from true to false. And also, change the breathe in text to false as well. Now, when the animation ends, it doesn't return to the initial state. But this is not what we want. So I'm going to press Command Z to undo the change. So in this video, we looked at how the easing function works. We also looked at the properties associated with the easing function, such as duration, delay, and how to autoreverse animation. In the next video, we'll look at how to play an animation without user interaction. So see you in the next video. 13. Playing animation automatically: Hi. In SwiftUI, you can sit an emission to play automatically or use user interaction to play the animation. You can make the animation play with a tap gesture or a drag gesture. For example, in this project, You can see breathe in text has this onTap gesture attached to it. So this allows you to play this animation using a tap gesture gesture. Let's click on this icon to preview the animation. This animation plays only with a tap gesture. When I move the cursor on the text. And tap. You can see now, the animation starts to play. To play this animation without user interaction, you can use a modifier called onAppear modifier. So let's stop the preview. And change the tap gesture. I'm going to select it and delete it. And write .onAppear. Here. We're going to the state variable that animates the breathe in text. So I'm going to copy this and write .toggle. We changed this animation to play automatically. Instead of using tap gesture. Let's click on this icon to preview again. So if you want to create an animation to play automatically in SwiftUI without user interaction, we use the, onAppear modifier in order to make it animate automatically. In the next video, we'll look at how to animate a trim path that will cause the semi-circle to draw itself and erase itself as seen in this video. So see you in the next video. 14. Animating trimpath: Hi. In this video, we'll look at how to animate the trim path of a shape view in SwiftUI. Using the trim, we can animate the "from" and the "to" values so that we create this erasing and drawing animation of the quarter dotted circles as shown in this video, You can see we have 2 quarter circles. If I stop the preview, this is the first quarter circle, that is the one on the left. Let's remove that. You can see it is left with the one on the right. I will press Command Z to undo the change. Let's select the one on the right and remove it as well. You can see it is left with the one on the left. Both the right and the left are the same. The only ten here is the rotation angle. You're going to see the first one, which is the one on the left, is rotated at an angle of minus 180. And the one on the right is rotated at an angle of 90. That is why they animate from different directions. To animate the trim, we have to animate the properties. The from value, or the "to" value. To understand how the stroke start and a stroke and work, in this case, we have the from value and the to value. In order to understand how these values work, let's use a timeline tool, called Kite Compositor. I'm going to press V to bring pen tool. I'll click to draw a vector point. I'll move the mouse to the right. Click again to draw another vector point and press escape. In order to release the tool, I will now go to the inspector and change the line width of the line to a larger value. Like that. I'll also change the stroke color is something like that. With the view still selected, Here, you can the see stroke start, and the stroke end. The strokeStart defines where the stroke is starting from, if I drag it to the right, you can see we are just drawing and erasing the stroke from the left. The strokeEnd also defines where the line ends. If I drag it to the left, you can also see we are just erasing this view from the right. You can use this same concept to create the animation by causing the semicircle you saw in the SwiftUI animation to draw and erase itself. So over here, if we want to see a full circle, we can change this value to 0 and also, change the to value to 1. You can see we have a full dotted circle for the one on the left. I'm going to press Command Z to undo the change. If you go to the top, You can see I have these 2 state variables. showRightStroke and, showLeftStroke. These 2 state variables are used to draw and erase the path for each quarter circle. Let's look at the one on the right. So in this case we are leaving the strokeStart at 0, that is the "from" value. And only animating the stroke end for the one on the right. So over here we are using the state variable to animate this stroke from one 1/4 to 0. So when the condition is true, we set the stroke end value to 1/4 of the circle. And when the condition is false, we set the value to 0. When we look at the one on the left, we are animating the "from" value instead of the stroke end, which is the "to" value. This was done in order to animate both views in opposite directions. If I preview again and take a look at the semicircle, you can see they animate in opposite directions by using the "from" value for the one on the left and the "to" value for the one on the right. So in this video, we looked at how to animate the properties or the trim modifier. That is the "from" value and the "to". In order to create the drawing and erasing an animation of the semicircle. In the next video, we are going to look at how to create rotation animation of the flower shape. So see you in the next video. 15. Animating rotation: Hi, in this video, we take a look at how to animate rotation with SwiftUI. In this video, you can see 4 images that compose the flower shape are rotating from left to right. This the one on the middle left. If I select all 4 and just remove them. You can see 00:00:23.520 --> 00:00:26.100 we have the one in the middle. That one doesn't rotate. I'm going to press Command and Z to undo the change. So the purpose of this video is to look at how this rotation animation is created. In order to rotate a view or animate a veiw in SwiftUI, First, you need to set the anchor point of the rotation and also specify the angle, That is the initial rotation angle and a final rotation angle. In order to understand this concept, we are going to use a timeline animation tool called Kite Compositor. In Kite, You can see I have this image view. When the image view is selected, we have this circle, at the center, that is the position of the anchor point. The anchor point represents the center of gravity. The anchor point is the location at which transformations such as scale and rotation occur. For this image, since it is set to the center. If I go to the timeline and drag the playhead, you can see this image view is rotating from the center. We can also present it from the toolbar to see how it looks. You can see this view is animating from the center. For the animation that we are creating with SeiftUI, The anchor point needs to be positioned at the bottom here. In order to do that, we go to the inspector. You can see over here we have the anchor point. It is located at the center because it has this blue circle. at the center. Let's move it to the bottom center, like that and preview again. You can see it is now rotating them from the bottom. We can also go to the toolbar and the present. As you can see, this view is now rotating at the bottom. We can use this same concept in Swift UI to move the anchor point to the bottom of the view in order to rotate it this way. First, we created these state variables. rotateLeft, rotateFarRight. rotateMiddleLeft, and rotateMiddleRight? Those are used to animate these views from one angle to another angle. All 4 state variables are set to false. Let's look at how each one of them animates. We start from the middle left. You can to see over here the rotation effect modifier is attached to the view. And we are using the state variable to rotate this view from an angle of -25 to -five. We have the anchor point positioned at the bottom. Let us go to the next, which is the middle right. Is view also has the rotation effect modifier. And we are using this state variable to rotate it from 25 to 5. So this one and the middle left view rotate in opposite directions. Let us go to the next, which is the one on the left. This one and that. The left one is rotating at an angle of minus 50 to an angle of 10 using its state variable rotateFarLeft, the one on the right, which is this one, also rotates in the opposite direction. By setting the rotation angle from 50 to 10. All the views have the anchor point set to the bottom. And that is why each one of them is just rotating from the bottom over here. If for example, we don't want a view to rotate from the bottom, we can also move the position of the anchor point. Let's look at this one. The one that is on the right. We can change the anchor point by removing this value and write top. You can see the view is now rotating from the top. We can also change the one on the left in the same way by changing the anchor point value from bottom to top. And now, we are creating a very interesting effect here. So this is how you can create rotation animation in SwiftUI, you can do this by setting the rotation angle using a state variable and also setting the location of the anchor point. You can set the anchor point value, to the top left, right, center, or bottom of the few. In the next video, we are going to look at how to animate scale in SwiftUI. So see you in the next video. 16. Animating scale: Hi, in this video, we'll look at how to animate scale with SwiftUI. When we take a look at this animation, we have 2 views that animate with scale. The Fest is that breath in text. The next is the middle view that pops up. Let's look at the breath in first. We go to details view and look at the breath in text. We create the state variable for the breath in text. That is used to animate the view from one state to another. Over here, you can see we have applied this scale effect to the text and used the state variable breath in to animate the text from 0 to 1. And with the anchor point positioned at the center. That creates this scaling animation. Let's go to contentView and look at the middle view which is this image. First, let's remove all 4 images so that you can see how the middle view animates. You can see over here. This one scales from the bottom. This animation is created using the state variable grow and the value is set to false. So we use the state variable inside the scale effect. When the condition is true, we set the value to 1. And when it is false, we set the value to 0.5. And since the anchor point is positioned at the bottom, we are scaling it from the bottom position. And that is why we get this scaling-up effect of the middle view. So this is how you can create this scaling animation swift UI. You first create a state variable and also set the anchor point to any location you want. For example, you're going to set it at a center, bottom, left, or top. In the next video, we are going to take a look at how to animate the shadows. So see you in the next movie. 17. Animating shadow: Hi. The purpose of this video is to show you how to animate the shadows with Swift UI. You can see over here, I have created this state variable showShadow. We're going to use this state variable to animate the shadow so that when the flower opens, we set the shadow radius to a certain value and when it closes, we remove the shadow to 0. Let's look at how to do that. The ZStack you see over here contains all the flower views. Those are these images. When we scroll down. You can see over here, The ZStack closes. So we have to apply the shadow to the parent container, that is the ZStack that contains all the flower views. We can apply the shadow by using the shadows modifier. And with that, we have to set the intensity of the shadow. Over here. The intensity is the same as the radius. When the flower opens, we set to value to 20. And when it closes, we set the intensity of the shadow to 0. Next, we have to call the effect in the onAppear modifier, like the changeColor.toggle(). Let's copy that. And paste. And then we copy the shadows, state variable, showShadow, and replace this with that. Let's stop and play the animation again. You can see now, at the open state we have shadow. And when it closes, we remove the shadow. Here we have the elevation at the opened state and it becomes flat in the closed state. So this is how you can animate shadows using SwiftUI. In the next video, we are going to take a look at another concept called hue rotation that helps you to rotate the color of any view. So see you in the next video. 18. Animating hue rotation: Hi. In this video, we are going to take a look at how to animate and rotate the color intensity of a view, called HUE ROTATION or HUE ADJUST. Let's look at how that works. You can see in this animation on the flower opens, we changed the color to green and yellowish-green. And when it closes, we change it to purple and blue. We are using the modifier called hueRrotation. When I scroll down and look at the parent container for the flower shape, that is the ZStack. You can see over here, We've attached this hue rotation to the view. Let's look at how the hue rotation works using Kite Compositor. We have this image view. With that selected, I will go to the content filters, and click on the plus icon to add a filter. It has a Gaussian blur by default. I'm going to change a value and go to color adjustment and select Hue Adjust. And that applies a hue rotation filter to the image. By moving their uncle slider to the right or to the left, we change the chroma of the view or the color. You can see over here, the hue rotation takes an angle. It can be in degrees or radians. In this case, we are using degrees. If we go up, I have created this state variable changeColor and set the initial value to false. We used the state variable, changeColor to rotate the hue from -45 to 45. We can also change this value, for example, 120. And see what happens. You can see in the closed state it changes to pink. We can also change this to 120. And that gives this effect. So this is how you can use the hue rotation modifier to change the chroma or the color of any view in SwiftUI. With this, I'm going to end here. And this is the final video of the SwiftUI, Breath Animation for Relaxation course. From now, I'll be creating different kinds of courses that show you how to create animations using SwiftUI. Thanks for watching. 19. Designing Fine-grained, Relaxing and Stunning Breathe Animation: Introduction: Hi, welcome to the section design and fine grained relaxin and stunning brief animation in July. In this section, we will design this fine-grained relaxin and stunning brief animation. Use them swift UI or task in this project is very simple and straightforward. We will draw a single circle and is used rotation, skill and blend modes. To quit this britain animation dot looks beautiful on the pie. By the end of this animation. You will also understand why the cycles in brief out States. 20. Creating breathe-in and breathe-out text animations: Hi, I want to welcome you to the session design and fine grained brief animation in Swift UI. In this video, we'll look at how to animate the brief in and breathe out text in this animation. So let's get started. You can see from the screen that text breathe in and breathe out overlap. When we go to the code, they are contained in this parent container. We just exist. Ok. Brief in text is on top of the brief, our text. To create the text animations, we need to create the states. So here let's define two states. We will call one brief in and the other one brief out. So we set the initial state of breath into 0 and the initial state of brief out to one. For brief in, we will create two animations using opacity and scale. For brief out, we will create only one animation using opacity. So let's start creating the brief out animation. After defining the initial state. We want to trigger this animation without user interaction. So we add the own appear modifier to the text. The spring distinct variable brief out and shows it to set the final stage of the animation for the initial state is set to one. So for the final state, we will set the opacity to 0. Let's copy this date. We are going to use it to animate the opacity. It just above the ON appear modifier. We are going to add to a positive modifier in the parenthesis. Let's paste this. Did we get an error? But we're going to click here to fix the arrow. To see the animation, we have to add the animation modifier. Just below the basicity. We will add the animation modifier. The animation we're going to create is a back and forth animation. So let's use the ease in function is in out. Let's move down and select the one that has duration. For the duration of this animation, we will set it to four seconds. We also want this animation to delay. So we add a delay of 0.75 seconds. Next, we like this animation to repeat forever. So let's add the repeat forever modifier and set the parameter or to reverses to true, so that we create back and forth animation. So let's resume to see what we have done. You can see the brief bout text disappears and shows again. Since the brief in text is on top of that, we don't see it well. So I'm going to put a comment here. Let's remove the comment and start animating debriefed in text. Let's copy from the animation modifier to the API or modifier and pasted on the brief indexed. We are going to change the state from brief out to breathe in. When we go to the initial state, you're going to see in a set to 0. So in the final state, we set it to one. Let's copy the state and use it to animate the scale effect. Over here, I'm going to add the scale effort. Then in the parenthesis, Let's paste the state that gives an error. We need to convert this to CGFloat. So we now get the two animations of the texts. We showed a brief out text using opacity and show debrief in text using scale. Looking at a text animations, you can see the brief in text takes long to scale to 0. We're going to use capacity to make the brief in text scale to 0 faster. So it just above the skill effort. You're going to add opacity. Instead of setting it to a fixed value, you're going to use the state. We get an arrow by clicking here, we can fix the error. So by animating the scale effect and the opacity of the brief indexed to 0. You're going to see the text now hide itself faster than before. So it is how to create the brief in and a breath out text animations in Swift UI. 21. Stunning breath animation: Animating scale, rotation and blend-modes: Hi, In this video, we will create this stunning brief animation using an atom, but a single cycle, rotation, skill and blend modes in Swift UI. So let's get started. From this screen you can see we have the title and the text brief in. Let's begin by adding a circle. So here we are going to draw a circle. To draw a circle, you can go to the object library and search for circle. I will drag the circle to this part of the code. Release the mouse. That takes the entire width of the screen. What we're going to do is to give the circle a proposed with using different modifier. Let's give it a circle at width of 150 and a height of 150. We also need to give it a foreground color just below the for how we are going to add the foreground color modifier. Instead of using the default blue color, we are going to use a color literal. By default, we get a white color. By double-clicking on the color rectangle. We're going to select any of these colors. I'm going to select the one on the bottom right. Next, we want to create five copies of this cycle, making them six in total. And by pleasant each of the circles on top of one another. In order to place the circles on top of one another, we need to embed the circle in a parent container Z stock. By control clicking the circle. We're going to choose the option Z stock. To embed a circle in the parent container. We can create copies of the circle by using for each. To do that, I will control click the circle. Two-step option, repeat. We get five copies. So I'm going to change this to six. We now have six copies of the circle, but the occupy the same position, so we need to separate them apart. We can do this by using the offset modifier. So below the foreground color modifier, I'm going to add offset. We can use the x or the y offset. It doesn't matter which one we use. So we are going to use the Y offset. We will set the white offset to minus 80. And this value is the same as the gap around which the circles will be rotated. Let me show you visually and sketch. Over here. I'm going to draw a circle by pressing or with the circle selected. I'll go to the toolbar and select the option to get a ship layer, unrooted its copies around a circle. I'll just click. Good Did. You can see by dragging this handle will control the gap in the center. So in Swift UI, the GOP is controlled using the offset. The offset value is the same as the central gap. So the circles to occupy the same position. But we're going to use rotation effect to rotate them around the GOP, which is the offset. We can do that by pleasant the rotation if at just below the offset. If we bless the rotation effect above the offset, this is not going to work. So over here I'm going to add rotation effect. Let's use degrees as the angle of rotation. We have two rooted each of the circles by an angle. So we need to create estate. So over here you're gonna see we have this did angle, which is set to 0 dot 0. Instead of certain the angle of rotation to a fixed. Finally, we are going to rotate each item by the state we created over here. So here we need to convert each item to double that as the items in this range. So we have six circles. That is the items in this range. So we have six cycles. Next, we are going to multiply each item by the state we create it. We still have the circles occupying the same position because we haven't set the final state of the angle. So let's set the final state of the angle on where this animation is triggered. So we want to trigger this animation without using user interaction. So let's add their own appear modifier. In their own appear modifier, we are going to set the angle to 60. You can also see the circles are rotated around the central GAAP. We can control the gap in the center by increasing or decreasing the value of the offset. For example, changing this to 160 or changing it to 120. If we change it to a smaller number and we don't see it at all. Let's undo the change. You can see the circles look very flat, but we can use blend modes in order to shorten, for example, the overlap. So let's add the blend mode modifier. Instead of dark and we're going to set it to hard light. And now you can see we show all the overlap and the edges are the same because by adding the rotation effect this way, we also animate the circles to open and close. So to see this animation, we're going to add the animation modifier just below the blend mode. Let's add the animation modifier. This is a buck on for animation. The isn't function, which is appropriate in this situation, is ease in out. Let's set the duration of the animation to 4 second. In each iteration, we also want to have a delay. So let's add a delay of 0.75 seconds. Next, we want this animation to repeat forever. So we add the repeat forever modifier on set auto refers to true. So let's resume to see what we have done. You can see from this animation does circles or pin on gross nicely. We can also enhance this animation using scale. Let's add the scale modifier. To animate the scale we will need to create a state. So let's copy this one. To create another state. We will call this scale. So for the initial state, we are going to set it to 0.2. And in the final state, we set it to one. Let's copy this data and use it to animate the scale. So in the parenthesis, I'm going to paste. We get an error. So we need to convert this to CGFloat. Let's resume on restart again. So you can now see, are the circles open with predation. They also scale up on us. They close the scale down as well. We can also generate different graphics for this animation using the blend mode. So over here you're gonna see we have it set to hard light by tangent is to, for example, difference. We have totally changed the graphic to this form. If we change it from difference to exclusion, we also get a completely different graphic. So with this, I'm going to end here. And this is all to create this stunning brief animation in Swift UI. We created this animation using a single circle, rotation, scale and blend modes. 22. Calmbreath: Brief in polled. Without, you will see a similar animation in the iOS application. We will create this animation in Swift too wide, but divided it into five different steps. One, I'll show you how to move their octet on the circular motion path. We will look at how to up-skill the views in order to create the brief in animation. Next, by keeping diffuse constant, we will create the whole state. Then I'll show you how to downscale the views in order to create the brief out animation. Finally, we will look at how to show the text brief in hold and brief out using animation. So I want you to join me to quit the iOS apps. Brief animation using mutton, but Swift UI.