Adding Animations in SwiftUI | Bootcamp #25

[Music] what is up everyone i'm nick and i think you guys are ready to learn about animations in the last bunch of videos we covered state variables conditional logic and ternary operators and we're going to use all of that in this video so we can make some animations in our swift ui views now some people might say that animations are not part of the basics of swift ui and this might be a little premature but personally i think they go very well with the structure of this course because we just covered these ternary operators and now we're gonna see the power of them now of course there are ways to make really elaborate and complex animations but we're going to keep it nice and simple and look at the very basic animations like changing the color or the size of an object or moving and rotating an object it's gonna be a whole lot of fun i hope you guys are as excited as i am animations can really give your apps a professional feel with just a few lines of code so leave a comment below if you learned something from this video if you enjoyed this video or if you're just as excited as i am in this video we're covering animations and we're gonna need a new file for that so as always let's right click the navigator create a new file it's going to be a swift ui view and let's call it animation bootcamp go ahead and click create once you're in that file click resume on the canvas to make sure you're all connected and let's get coding let's start this video the same way we ended the last one with a very basic screen let's add a v stack at the top of the v stack let's have a button let's use the string protocol completion because it's just a regular button let's make it say button and in the action we will leave it blank below the button let's add a rounded rectangle with a quarter radius of 25 let's give it a fill of color.green and let's give it a frame with a width of 100 a height of 100 and we don't need the alignment for now i want to put this button all the way to the top of the screen and i want this round rectangle to stay in the center so a nice little trick is adding a spacer on both sides of the rectangle so these spacers will even out and it ends up putting our rectangle right in the center here and when we click this button we want to do some animations so in the last video we looked at ternary operators and we're going to use them again so let's add a state at the top outside the body we'll do at state var we'll title this one is animated of type bool equals false you should be getting used to this at state var pool by now and when we click on this button we're going to toggle is animated dot toggle now in the last video we learned ternary operators to change the color so we're going to add one of those in so we're gonna do is animated question mark we'll do color dot red otherwise color dot green let's make it a little bigger just so we can see this let's do uh 300 by 300 click resume on the canvas let's go ahead and press play on the live preview and when we click the button it switches from red to green now this is good this works but you'll notice that it switches instantly and that looks good sometimes for certain things in apps but oftentimes when we have modifiers that are changing we actually want to animate them and we can do that super simply in swift ui and the first method is when we go to toggle this we will toggle it with animation instead of just toggling it regularly so all we have to do is add with animation and in this body it's asking us what kind of animation we want to do so if we press the period we have a bunch of different completions and these are all different animation timings and in the next video in this series i'm going to actually go through all of these but for right now let's just use dot default and then we'll open the brackets we'll put the is animated inside so now when we toggle this anything that is affected by this at state being toggled is going to anim is going to change with animation and it's going to use default animation so let's go ahead and test that out again when i click the button you can see that there's a nice fade now from green to red and red to green it's not instant and because we have the width animation on the is animated.toggle anything that's affected by this variable is animated is going to animate so let's add some more animations for this rounded rectangle right now it's 25 let's do is animated if it's animated let's make the corner radius 50 otherwise let's keep the corner radius as 25. so when you click the button if you look at the corners they're going to animate they're not just going to jump to the next but it's going to animate to the next which is awesome and let's also do the frame so let's put the width and the height on different lines and for the width i'll do is animated if it's animated i'm going to make it 100 width so it's smaller otherwise 300 same thing for the height let's do is animated 100 otherwise 300 and now instead of just jumping to the smaller size like it did in the last video we're gonna animate to the smaller size and you'll see what i did here is i made the corner radius when it's animated 50 which is exactly half of the frame when it's 50 and that's why it looks like a circle so we're animating our rounded green rectangle to a circ red circle and this is awesome because that was not a lot of code to get this really cool animation and let's add an offset so remember the offset moves the object to the right left up or down and i actually only want to animate the y so if we move it to a hundred it's going to move it down by a hundred so let's do is animated so when it's animated we move down by a hundred otherwise zero you can see that now it's moving down let's move it down a little more so i want it down here let's do maybe 300 see how that looks so it's moving up and down on the phone and it's animating the colors and we can continue to do this forever with pretty much as many modifiers as we want to add i'm going to add one more in its rotation but let's keep in mind that the order of these modifiers matters so if i rotated it with the offset it's going to rotate this 300 offset as well and it's going to go probably off the screen so instead of adding the rotation after the offset i'm going to do it before and we'll call dot rotation and then we can add an angle in here and we'll add the degrees and we'll do is animated if it's animated let's let's do maybe 360. so it'd be like a full circle and then otherwise zero let's click that button one more time and we should see that the rectangle is actually going to start spinning as it goes down to the circle so that looks pretty cool and you guys can play around with this to add a whole bunch of animations and stuff to your views but i want to show you a couple quick ways that we can customize this animation so right now we just have a default but in addition to calling that default we can add a dot delay and we're going to get an error quickly that it cannot infer the context and that's because when we call just default it's inferring that it's an animation and if we chain these so we do default end.delay it wants us to basically just confirm that it is an animation so we can add the word animation before so animation default.delay and we can delay it by however many seconds we want let's do maybe two seconds so when i click the button it's going to delay for two seconds and then animate click the button one two animate click the button one two animate and then we can do dot repeat count and let's use the completion with the auto reverses option and this animation call is getting a little long so i'm gonna put it on different lines so let's press animation press enter just like modifiers on anything else and we'll do one more after this so we have animation defaults and then we have a repeat count and we can repeat the animation a bunch of times so let's do five and auto reverses means if do we want to animate animate and then pop back to the original state or animate and then animate back to the original state so let's keep the auto reverses as true and you'll see that it animates both ways it's going to animate down and then animate up down up down up and it's going to animate five times and it's going to count each direction as one so that's why it's ending on the circle because it went down up down up down and now it's going to go up down up down up up down up down up so five times and the auto reverses is true let's change the auto reverses to false and now it's only going to repeat from the top to the bottom then it's going to reset and do it again so it looks a little glitchy because it's popping back to the front but you will use that in maybe some other animations as you get more complex but it's just good to know that we have here and the last thing i want to show you guys is that we could call instead of that repeat count dot repeat forever and again let's use the auto reverses completion and let's keep the auto reverse as true and let's get it to repeat forever so that basically is going to do the same thing as the repeat count except it's not going to stop and this is great when you have animations on your screen that you want to just be on the screen for as long as the user is on the screen so we click our button and it's just going to keep animating forever and the last thing i want to note here is that right now we're doing with animation when we toggle the button but there is another way to add this animation and instead of adding animation to anything that happens when we toggle this variable we could add the animation just to this rounded rectangle and then anytime this rounded rectangle is changed it will animate so it has nothing to do with this variable and everything to do with the rounded rectangle now so i'm going to do that by adding at the at the bottom of these modifiers here let's add dot animation and then in this call we can add what we have here we have at the animation.default.repeat forever i'm going to just cut it and let's paste it into the animation now we actually don't need this with animation anymore so i'm going to just delete it so now is animated against toggle and the rounded rectangle is still going to animate the same way except except we're animating from a modifier which is only going to affect the rounded rectangle let's make sure it still works still works and the difference here is that if we had a bunch of things that are affected by this isn't by this is animated like we maybe we had another rounded rectangle and we only wanted one of them to animate well this would only be a valid on the rectangle that it's on in our first setup though when we animate when we had the width animation for this everything affected by this variable changing would animate it's a little different offhand i would recommend using the width animation that we did at the beginning rather than this because there could be situations when this rounded rectangle gets changed like maybe you draw it on or off the screen and you don't want it to animate but now it's going to always animate so most of the time when you have an animation i would say that the animation is probably caused by clicking a button so i would try to keep the with animation but you can do this dot animation as well now in the next video we're going to look at animation timings so this dot default we can actually change the speed and the velocity of each animation so right now it's moving pretty quickly we can make it slower we can make it faster we can do a whole bunch of really cool things by changing the animation timing from default but i think that deserves its own video so i'm going to do that one next hope you guys enjoyed this video on animations animations are a lot of fun and super easy to add in swift ui so once you master animations you'll be able to make really really cool screens as always thanks for watching i'm nick this is swiffle thinking and i'll see you guys in the next video

Channel: Swiftful Thinking

Views: 3,427

Keywords: swiftui bootcamp, learn swiftui, swiftui animation, animation swiftui, .animation swiftui, swiftui .animation, swiftui withanimation, swiftui with animation, withanimation swiftui, with animation swiftui, how to use animation in swiftui, swiftui how to use animation, swiftui how to add animation, how to add animation in swiftui, animations in swiftui, swiftui animations, swiftui animation not working, how to implement animations in swiftui, animate swiftui, swiftui animate

Id: 0WY-wrW2_bs

Length: 14min 1sec (841 seconds)

Published: Mon Feb 15 2021