How to use Transition in SwiftUI | Bootcamp #27

[Music] hello again a big welcome to all of you who are just joining the boot camp now uh if you don't know i'm nick and in this video we're going to talk about transitions and transitions are a lot like animations the default animations which we've been covering in the past two videos now there is a fundamental difference between a regular animation and a transition and it's that the regular animations like we've been doing in the past couple videos are animating objects that are on the screen already so if you have an object that's on the screen and you want to change its color or you want to change its location or size that's just a default animation but if you have an object that's not on the screen and you want to animate it onto the screen or even off of the screen then you can use a transition now transitions are definitely underutilized in swift ui i think it's because they're a little tricky to get them to work because you do need some conditional logic so thankfully we already learned conditional logic and we are now ready to actually become experts at these transitions so as you're gonna see we can use these transitions not only to animate like a small object or a button onto the screen but to even create really cool custom segues to animate a whole new screen onto our view so i'm back in our xcode project again and like we always do let's create a new file for the code in this video let's right click the navigator new file it's going to be a swift ui view and this time we're talking about transitions so let's call it transition boot camp go ahead and click create click resume on the canvas once you're in the file and let's get coding so let's start by adding a very simple view to our screen we'll add a z-stack open the brackets and at the top of the z-stack i'm going to have a button so let's let's add a v-stack and let's add a button just let's use the title with the string protocol approach because i don't really care what the button looks like let's set the title just as button for now click enter on the action and we're just going to leave that blank for a second and i want to push it to the top of the screen so let's add a spacer underneath the v underneath the button in the v stack so it's pushed to the top on top of this v stack in the z stack let's add a rounded rectangle let's give it a corner radius of 30 and let's set the frame on this let's set the height and i want it to be exactly half of the screen so instead of trying to figure out what half is calling like maybe 400 or something like that i'm going to call ui screen dot main dot bounds dot height so this is the full height of the screen and i'll do times 0.5 which is 50 percent of the screen now i want to align this around the rectangle to the bottom of the screen so our z stack right now has center alignment we have alignment of center i've already done a video on z stacks and alignments so you should understand this but let's change the alignment to bottom so the rounded rectangle because the frame is only half is going to align to the bottom whereas the v stack has this spacer so it's actually the full size of the screen so it's not going to look like it changed and that's why our button is still at the top so around a rectangle is now at the bottom i see that there's still some white space at the very bottom and that's safe area so let's ignore that so at the bottom of our z stack let's just call dot edges ignoring safe area dot bottom and before we get into transitions let's just add an animation because we've already done that in the last couple videos let's add an at state var show view of type bool equals false and when we toggle show view let's show the rectangle so we'll call dot opacity on this rounded rectangle we'll do show view question mark 1.0 otherwise 0.0 so if show view is true we have 1.0 opacity otherwise we have zero and we can call dot animation and we can put whatever animation we want in here let's do dot ease in out when we click the button we are going to show view dot toggle let's click resume and check it out so click the button and very nicely the rounded rectangle appears on the screen and the reason why i'm starting here is because these default animations are really good when items are already on the screen so the rounded rectangle is already in the view hierarchy here and even when it's got opacity of zero it's already in the hierarchy it's not coming onto the screen so we can change the opacity we can change modifiers of an item that's already on the screen and that's what we've been doing so far with our animations with transitions however we can animate something when it's coming onto the screen when it's being added into the view hierarchy so what we're going to do is add a simple if statement so we'll say if show view open the brackets and we'll put the rounded rectangle inside so now this rounded rectangle is only going to get shown if show view is true and if show view is false this rounded rectangle is not even going to be on the screen it's going to be removed from the view hierarchy so we're going to use a transition instead of opacity so we're going to call dot transition we're going to call dot transition and let's start with an easy one we'll do dot slide so now when i click this button this round of rectangle is actually going to be added into the view hierarchy and because it's being added we can it will use a transition so let's check it out click the button and now we have this nice slide transition coming in from the left moving out to the right that's what the slide is and again it's using this animation that we already have is ease in out let's check out a couple other really useful transitions my favorite one is dot move and here we can pick what edge we want to move from and one thing to note is that the edge is the edge of this view so it's the edge of this rounded rectangle so if we click so if we do dot bottom it's going to appear like it's coming off the bottom of the screen but that's because the rectangle the bottom of our rectangle is actually at the bottom of our screen so if we do dot top this is actually the top right here in the center of the screen so it's not going to look good i want to show you that it's the top of the rectangle not the top of the screen so when we pop in it's popping in from like this center area here because this is the top of our view so this actually doesn't look good but if we do that bottom because we're along the bottom edge it looks perfect and this is probably a transition that you've seen a whole lot of times in apps a lot of developers are adding this pop up from the bottom where you might have a bunch of options or like an onboarding to sign up or maybe some info so this is very very very useful and i would say the most common uh animation for this is actually dot spring and not dot ease in out so we could do dot spring and this looks pretty cool i'm gonna put that back to dot ease and out and of course for the move we could do dot leading or dot trailing and it will pop in and out from the left side of the right side much like the slide there's a couple other transitions i want to show you guys but they're a little tricky to implement so i want to just run you through it so instead of dot move we can call dot opacity and i ran into this problem a whole lot of times it looks like it's not really working it looks like our view is just popping onto the screen and that's because it's not working and honestly i'm not really sure why this combination doesn't really work here but for the opacity i've learned that if we call any transition dot opacity and then add animation directly onto this opacity so we can call dot animation dot ease in out and then we don't need this animation at the bottom and again i don't know why this works but now we can see it animating on and off the screen so that's a neat little trick to get the opacity transition to work and it's looking pretty good this is great if you want to draw something on and off the screen and the same situation is if we want to do the scale we can press the scale and now it's going to zoom in and zoom out which is also really really cool the last and final thing i want to show you guys is that we can change the transition so it is different when it's coming onto the screen versus leaving the screen so let's put this animation back let's get rid of this any transition here and we're going to call dot asymmetric and when we call an asymmetric transition we can actually add an insertion as well as a removal so i'm going to put these on separate lines press enter before insertion press enter before removal just to make it a little easier to read so we can now change how we want to come onto the screen and how we want to leave the screen so for the insertion let's call dot move let's do leading edge and for the removal let's do move dot bottom so it's going to come in from the left and move out to the bottom we can change these up so let's do uh dot insertion let's do from the bottom and removal we can do any transition dot opacity dot animation dot ease in out now we're coming up from the bottom and leaving with the opacity all different kinds of combinations we can do to get really cool effects so that's it for this video i just wanted to show you guys what transitions were how powerful they could be and as a quick rule for when you're building your apps basically if you are trying to animate something coming onto or off of the screen use a transition and you're gonna have to add some kind of conditional logic like this to draw the actual content on and off of the screen when you want to show it however if you have something that's already on the screen and you want to like move or wiggle and it's already on the screen then just use traditional animations but overall transitions are super easy to add often overlooked so i think these will really help you out in your apps so that's it for this video hope this was an easy one hope you guys learned something as always i'm nick this is swiffle thinking don't forget to subscribe if you are learning something if you're enjoying the course and i'll see you guys in the next video

Channel: Swiftful Thinking

Views: 3,174

Keywords: swiftui bootcamp, learn swiftui, swiftui transition, swiftui transitions, transition swiftui, transitions swiftui, swiftui .transition(), .transition() swiftui, how to use transitions in swiftui, how to add transitions in swiftui, swiftui how to use transitions, swiftui how to add transitions, swiftui transition not working, transition not working in swiftui, .transition(), what is transition in swiftui, swiftui what is a transition, what are transitions in swiftui

Id: X6FAIa0nJoA

Length: 11min 27sec (687 seconds)

Published: Tue Feb 16 2021