hey guys let's go over three quick examples of how to use animations with swift ui so here i have a new xcode project and what i want to do first is basically make this look pretty and i'm going to do that with a z-stack and put a linear gradient with a background of like blue turning into black with the start point of top leading to bottom trailing just to kind of get the ball rolling here and then we're going to go dot edges ignoring safari.all all right uh the first example we're going to do is like a list cell and i think one of the best ways to do this is a check mark bouncing so if we were to do like an h stack with text and then have a spacer and then have an image at the end of system name dot checkmark.circle dot fill so you can see we have black text we have a black check mark we have a lot of work to do so we're gonna font dot system make this bigger 24 then we're going to do dot foreground

color is dot green. There we go. Then we're going to give it some padding. And then on this h stack, I think we should give it some padding as well. Yeah, bring those in. And then give it a cool background. So we can go background, uh, dot ultra thin material in a rounded rectangle to give it that like glass morphism type of look. 20 style duck continuous. Cool. Let's change this text to subscribed to Logan Koshanka because we want this to be like a task that you can check or uncheck. And this is a great task to do. We could change this to bold. Actually, this brings me to my first point. And when you do animations in SwiftUI, there's essentially a formula with three parts. Number one is that you need a state boolean. So what we're going to do is come up to the top here and go at state private var is subscribed. We're going to set it to false by default. Then what you need to do is use with animation to toggle that boolean. So we will use this by the check mark.

going to come down here and go dot on tap gesture, and we're going to say with animation and do this subscribe dot toggle. And with this animation, you can customize it. You can go dot ease in out. You could set a duration of 0.5. How's that or 1.0? So part 3 of that formula is to use a ternary operator to essentially control and activate that animation. So what do we want to animate? Let's say we can do so. First of all, we can use an opacity on the text, and we could say is subscribed question mark. So if they are, we're going to make the opacity one, so full. And if not, we're going to make it 0.5, so we're going to have a little bit of gray to it. So we could test that by coming here, tapping it, and see looks good, right? Now we can come to our system name for the image and say is subscribed. If they are, then we're going to use this check mark. And if not, we're just going to use circle.

for foreground color that's another example. We can do is subscribe dot green else dot black see cool. Then we can do a uh another one. I like to do is dot scale effect. And is subscribed you can make it 1.25. It's its normal size if not we'll make it one. So it'll not only will it turn green. It'll get bigger so it kind of comes out cool. So that's all I had for the first one. That's the simplest uh example. I think the second example. We're going to use a uh shape with with a spring. So what we're going to do here is we're going to embed. We have to embed everything in a v stack actually. And let's give this a spacing of like 50 just to be safe. Uh give ourselves some space. We're gonna come down here to circle. We're going to say dot frame. Let's make the width of 100 height 100. We're going to go foreground style is a linear gradient along with the colors is the easiest one.

to use. And we just want this to look good, you know. We want this to be cyan and green to match our background. And then we'll go top trailing to bottom leading. I was wondering why this was on top. We need to put this inside of our v stack. So go ahead and cut that. And looks like I gotta refactor my code a little bit. That's what we want right there. Okay, so essentially here we're going to start out by doing the same thing, which we're going to use our formula. So first part, state private var animating circle is equal to false. And you can name these anything, but basically we can come down and say onTap gesture with animation. And for this one, we're going to use spring. And we're going to say animating circle.toggle. So that's part two of our formula, right? The problem is this isn't going to do anything if we tap it because we didn't set up a ternary operator. We did not do

our third step so let's go ahead and do that now. We can move the circle with offset. We can say, uh, animating circle for x. If it is animating, it's, you know, going to be moved by 30. If not, by zero. Animating circle for y is going to be up 100. If not, it stays. We can do dot scale effect animating circle. If yes, we can make it twice the size. If not, we'll make it the same size. I feel like that's probably enough for now. So with the spring cool right now, I want to show you guys how to customize this spring animation. So you can look this up on Apple and read their documentation. But I basically have a cheat sheet here. So response, this is going to be your stiffness with zero being the most stiff. For damping fraction, this is going to be your bounciness, zero being your most bouncy. And for blend duration, um, no one seems to know what it does. The definition is incredibly confusing and I couldn't find anything on it. So if

you find out comment and tell me, because I have no idea. Anyway, I think the two most important ones are response/stiffness and your damping fraction/bounciness. So, for response, let's go 0.9, and for damping fraction, let's go to 0.5, and blend duration, we're going to set to 0 because it shouldn't even be there. All right, so let's try this slight bounce at the end, right? So then, if we set this to 0.1 and try it, look how bouncy that is. If we set this to 0.9 and try it, it barely goes, it's very smooth. So, you can play with these as much as you want. And then, for response stiffness, if we go 0.1, it's just quick and no bounce. If we go 0.9, it's kind of like a smooth gradual ease in and out type of deal. So, that's example two. And spring, like I said, I encourage you guys to play with these parameters and kind of see what you like, because

you can go um you can have a very deep dive into that spring one all right so for the third one we are going to use a button example and we're going to give ourselves some space here. We're going to make a button and pick the one with action and label and just hit enter. This will be our action, this will be our label, and for the label let's do that first. Let's make a text that just says animate and let's make it pretty. So we can go bold, we can go .frame(width: 200, height: 50), we can do foreground color .indigo for the text, and then we can say .background(linearGradient( colors: [.mint, .white], startPoint: .bottomLeading, endPoint: .topTrailing)) just to mix it up, you know, cool. That looks good. Clip shape rounded rectangle corner radius of 20 style continuous. We're going to give it a little shadow, just a basic one with a radius of three. All right, so what's step one? State var state boolean so state private var

animating button equal to false. Step two, use with animation to toggle. So, with animation, we're going to do dot ease in out with a duration of one. And then we're gonna say animating button dot toggle. Then we have to give it for step three, our, you know, ternary operator. So we can do the opacity. Maybe we could say animating button, if yes, it is full-on visible. If not, it is only 70% visible. You can see it kind of faded away there. And then another we can do is dot scale effect with animating button, if yes, 1.5. If not, you know, 1.0. It's a regular size. And I think that's enough for now. Let's give our button some padding. And then if we play it, it grows and the full opacity shows. So you can see that effect. But I'm going to show you guys one more thing you can add on to this duration and say dot repeat forever, repeat count save repeat count of 10. So it will repeat 10 times when you do this.

animation in and out. Cool, right? So, if you wanted an effect to kind of emphasize to users, you could do that. So, just to recap: state boolean with animation ternary operator. That's all you really need to know, and I encourage you to explore more on your own. Thank you, guys, for watching.

Easy SwiftUI Animation Tutorial with 3 Examples

Easy SwiftUI Animation Tutorial with 3 Examples