Launch Screen Animation in App (Swift 5) - Xcode 11, 2021 - iOS Development

[Music] [Applause] [Music] what is going on everyone welcome back to another video today i'm super excited to bring you guys something that's been requested quite a few times in the comments and that is how to add a launch screen animation to your app so basically what you just saw there let's see that one more time you can add a super slick animation uh to your app launching in this case we have the instagram logo kind of zooming in and fitting out kind of like twitter to a degree teach you guys how to set it up where you can have your own custom animations you can apply this to uh different kinds of views and of course it is fully dark mode supportive so if we go back and open that up one more time whoops let me close this and reopen the app we'll see that it looks just as nice in a dark mode uh and yeah so we're gonna take a look at how to build this from scratch no frameworks all on our own that said make sure you absolutely destroy that like button down below as always let's absolutely destroy it so google has to go back and fix it hit subscribe while you're at it if you've been watching and enjoy these videos get exclude ready get excited let's look at some awesome animations quick pause before we get into the video if you haven't seen it already i am hard at work putting together ios academy.io a community where all of us ios engineers can come together learn how to build some of the top apps like facebook youtube and instagram in addition to interview prep to land some of these ios roles at top tech companies so if you're interested in the free and premium content to come head on over to ios academy dot io and enter your email address in the waitlist form and you will be notified as content becomes available that said let's get into the video all right so we're going to get started by opening up xcode and creating a new project we're going to stick with a single view application and i'm going to go ahead and call this launch screen animation hit enter and save it wherever you'd like and let's jump right in so the very first thing we're gonna do is pick a simulator up here and hit that run button to get that booted up i have this one open and let me also expand this xcode window to give ourselves a little more room to work and actually before i expand it this size we want something to animate on our launch screen so i just grabbed a instagram logo from google images uh this method works for labels or anything that you want to animate but we want to bring this image in for the purposes of this demo so go ahead and open up your xc assets create a new image set and i'm going to go ahead and call it logo and drag this guy in now we can expand this side of the window and go to our view controller and talk about how this whole thing works so animation as a launch screen is pretty simple actually so there's two parts to it the first part is a bit of a visual trick and the second part is a view controller transition so the way it works is we have this launch screen storyboard which is where we can obviously put our things that we want to show on the splash screen once the app is launching however you cannot perform any animations on here so how do we achieve the effect well the way we achieve the effect is we know we have a view controller that opens up as soon as that launch screen goes away and the visual illusion is we make this view controller look identical to our launch screen storyboard and we can perform animations on here and once the animation has finished we can transition to another controller which is our actual app controller so all of that in practice uh or in theory sounds straightforward which it is but i think it helps us see it actually done so let's do that so we're going to come into our launch screen storyboard here and find an image view drop it on in let's change the image to that logo we brought in and we need to add some constraints the first ones i'm going to add are to horizontally and vertically center it in the container and then we're going to also add width and heights so i'm going to say 150 by 150. if you go ahead and hit command r you'll briefly see that the image shows and then it transitions to our view controller here so now what we want to do is we want the view controller to mimic our launch screen as a starting position and in here that means we need to create an image view like that and we want to create one so the frame we can save the x and y are zero and we know the width and height are 150 by 150 so you can go ahead and hard code those in we want to of course set the image to a ui image with a name and the name is going to be logo and then we can of course return said image put the parentheses there so it becomes a constructor like that and then we want to add this as a sub view to our view controller and then in view did layout sub views we want to call super whoops we want to call super view did layout sub views and then we want to center this image view to be centered on this screen so now when you run it you'll notice that the launch screen comes and goes but our view controller looks exactly the same so you can't visually discern when the launch screen started and when the view controller began so i'm going to set a background color so you guys can see the difference and why it's a visual illusion so we started out the long screen and then we came to the controller and now in this controller we can actually perform animations and stuff the animation we're gonna perform uh in this video is similar to the twitter animation if you guys are familiar with what they do where this logo is going to basically expand and like we're going to zoom into it and then we'll fade into our actual app so for our actual apps content we want another view controller right so we're going to right click and do a new file pick a coco touch class and subclass a ui view controller i'm going to call it home view controller and in here we're simply going to set a background color we're simply going to say view background color is link and now let's actually go and work on that animation so let's get rid of the background color here and what we want is create a function called animate just to keep things separate once we have laid out the actual image view we'll call that animation function and one thing that i like to do is you want to call this animation function with a bit of a delay so the user can see the starting position so we'll use dispatch queue main thread and you want to perform that function async after now plus half a second and then in here call that animation function like i said this just delays uh the actual execution and in here we're going to use a very simple animation we'll say ui view animate with duration we'll make this one make it a reasonable duration for the animation and we're going to increase the size that'll be the first thing we do so i'm going to say the standard size is going to be self view frame size width times 1.5 and we're going to want to update the imageviews frame and it's going to obviously be a cz rect with a x y with and height and let me put these on new lines so my ocd doesn't go wild i don't know if it's just me but my code has to look perfectly aligned uh so for the x and y we're going to do some calculations up here we want to get the difference in x which is going to be size minus self.view.frame.size.with and we want the x to be negative this over 2 and then we also want to do a difference of the y which will be the height minus size hopefully that calculation and quick math is correct and this will be diff y over 2. so basically what we're saying is we're going to make the size of the image view larger which is going to be the width of the screen multiplied by 1.5 so it becomes off screen a little bit the difference of the x the new x we want negative uh of this difference over two and the difference of this y is we want the difference of uh diff y over two which keeps our image view centered so hit command r builds and runs see how that looks so now basically what we get is uh you get the long screen and then once we transition to the controller it looks like a seamless animation and that's why i was saying half of this is a visual trick and the other half is some clever view controller manipulation so the next thing that we want is as we increase the size of our image here we also want to fade it out so we're going to say self.imageview dot alpha we want that to go to zero so now as it kind of increases it does that i kind of want the size to be bigger so we're going to multiply this by two maybe that'll look a little nicer definitely looks nicer and obviously once the image goes away we kind of want the view controller to also fade to the other controller which is our home controller which is our actual main app we don't want like an ugly animation to dismiss and the other thing that i'm going to do is we are going to copy and paste this and i'm going to move i'm going to delete this uh opacity changing animation to its own block and i'm going to make this one slower than the fade then the uh the other one which increases the size so it looks nicer and let's bump this size once more let's see how that looks so the point is you have to play around with the numbers a little bit and i think that looks much nicer but now what we want to figure out is how do we get rid of this view controller so getting rid of the view controller is super simple uh it's actually i'm seeing it backwards we don't want to get rid of it but rather we want to present this home controller so to present a controller as you guys know you first need to create that controller and you can simply call present on it with an animation like so but we want the animation to be a fade so we can update the modal i believe it's called modal transition style and there are some animations baked into this already and the one we want is cross dissolve like so but we want this to happen after the animation ends so you have one of two options this animation for the fade out is longer than the other one so you can use this one but there is a completion parameter in here and i believe this simply takes a boolean so i'm going to say done so if done we can perform that presentation of the other controller you need to mark this self dot because we're in a closure so go ahead and hit command r and let's see what this looks like so it's a little too fast in transition to the other controller and we also get the controller popping up like this so we want this new controller to be full screen so we want to save you controller and we want modal presentation style and we want to make this full screen so it's not it's not that swipeable card and we kind of want this to also be delayed so again similar to how we delete the animation function call up there i'm going to add a delay block in here which will be async after now plus half a second and then we're going to paste in that presentation and let me go ahead and yeah it's uh it's okay so what we're going to do instead of half a second because it looks a little strange we'll decrease that and generally you want your home controller to not be such a jarring color so we picked blue here so it doesn't look great so what i'm going to go ahead and do in this home controller is let's get rid of that and let me just add a label to say like welcome or something just so we can see that we have switched to another controller but by this point you guys should probably get the gist of what we're doing uh point being like you're gonna have to play around with it to get the exact uh look and feel that you are going for which is kind of half the fun of it in my opinion personally uh we're gonna center this guy but i mean if i don't say so myself i do think adding a launch screen animation does really add to the visual appeal of your app it just really makes your app stand out and uh i personally am a huge fan of it so uh you should definitely try to add it to your apps i wouldn't overdo it with some crazy animation because it's kind of jarring to a degree also i don't think apple does it with any of their apps so it's not really first party but it does like i said make you stand out to a degree so we're just going to go ahead and center this and let me give this guy a frame we'll just say 300 by 100 and let's see what that looks like so we should switch to the other screen oh that's not what we wanted uh the background color here we should set so we want this to be dark mode supportive so we're going to say this is system background so we're in light mode so it should be white so we're going to fade and transition and we get to our other screen so yeah that's basically how we do it but let's take a look at what this looks like in dark mode i'm going to close the app go to settings developer let's flip on the switch for dark mode let's go back and let's launch this one more time so we get that we transition and i don't know about you guys that's a much nicer long screen than just a static one so there you have it that's how you can add animations to your launch screen experience it doesn't have to be that fade style animation it could be whatever you guys decide to build in this animation function if you enjoyed the video and haven't done so already make sure you absolutely smash that like button down below for the youtube algorithm there are some comments down there if you have any questions suggestions feedback just want to say hi i love hearing from you guys i hit subscribe also if you haven't done so already i think the majority of you guys that consistently watch haven't subscribed so hitting subscribe definitely means a lot would really appreciate it thank you so much for watching i will catch you in the next one

Channel: iOS Academy

Views: 20,165

Keywords: swift 5 animation, swift launch screen animation, launch screen animation swift, swift for beginners, swift 2020, swift 5 2020, swift animation, animation swift 5 2020, swift 5 tutorial, swift 5 for beginners, swift launch animation, launch animation app, swift advanced animation, swift programming, swift 5 learning, swift 5, swift, swift animation launch, swift launch screen, swift 5 launch animation, swift 5 2020 programming, swift 5 app, make first app swift, ios, app

Id: kbGsI5O9rWY

Length: 15min 50sec (950 seconds)

Published: Thu Jul 23 2020