SwiftUI Livestream: Code Onboarding UI and Animation

both design and code how to build apps how to design apps and how to use these new techniques in the industry that is going to make your life so much easier both for you for your developers for your team for your designers and hopefully we can combine the two wells together so just a little note we're a few hundreds away from hitting 50k subscribers uh recently especially because of these live streams weekly we've been receiving uh upwards of 500 subscribers a day so this is a this is going to happen okay so might be during this live stream or maybe a few hour hours later so it's really exciting it's a privilege for me to be teaching to such a big audience that is growing every single day and um you know i get excited every friday at 3 p.m to teach you all the things that i have explored meme and my team and this week we are going to explore the onboarding screens but in between those things we don't want to cover the basics right we don't want you know just a basic text and a circle or a rectangle we want to see how do we create this this glowy effect right this background blur mixed with blur and how do we create these graphics completely in code how do do we animate it so this is not just static and this is the exciting part so let me show you i can swipe boom to the next one and see these bubbles they're animating and all of these bubbles are really all in code so as i've shown from last week we've been able to convert svg into code and the reason why we're doing that is because we want to save the file size uh usually when you you know export these things into either png or you know svg or maybe not svg svg is pretty good but for ios you have to use pdf and you know the file size gets really really big and you know it's also not resolution dependent unless you export to 1x2x now the surprise here is that these graphics is about 1 to 10 kb overall and on top of that they're separated into multiple layers which means that we can animate them like this we can position them this is really basic so this is a simple movement animation and uh you know when we switch it just resets the animation you can see these planets they're moving um the stars they're appearing i didn't spend a whole lot of time so this is super basic at the moment but it works and on top of that it's dynamic so i can switch back and forth and you know it's it's really fun this is exactly what we're going to be exploring today and so let me just minimize this and let's take a look at the design here now the thing is when i show this design to a lot of designers developers they tend to think that this is quite far-fetched and it's quite difficult to implement and it's not going to make it to the deadline and you know we have a limitation budget the limitation of talent the limitation of whatever but what when you know how to code as we explained in the past you can overcome these things and you can spend way less time and you can collaborate better and you can use each and everyone's talent in their you know in in a way that we can combine so for example what i told my team was hey what if you spend hours this week to recreate these shapes into code so that we can customize it in code the colors the gradients the angular gradients and just focus on the background it doesn't require that much expertise the same with these graphics these planets so that's exactly what my team did and they did a phenomenal job which is why we're able to get these results here so i put all these all of these graphics into files here and you can see each of these graphics are essentially shapes okay and it's not impossible for anyone with a limited amount of experience in xcode to learn these things um as long as you show them exactly the steps to to do that and let them apply their aesthetic sense so if they're a designer they understand because they created these things right they they create these things in in figma they know how it works the positioning the sizing the colors and everything you just need to tell them how do you do that in code how do you transport that in code except instead of doing it the lazy way which is to export everything and merge everything into a single image so that's exactly what we did so we have a bunch of shape here and uh you know i've shown you it's in this description by the way we have this resource where you can convert svg code into swift code right so any shape that you see here you can copy as svg and then you can paste that and convert to swift so this is easy once they have the shape then they can start coloring everything now once they they have done that then we get into the more um you know nitty gritty stuff so let me just get this here i believe it's inside the face yeah we we have a lot of files of course and you know we're still new so there's a lot of naming convention that are not completely applied correctly um this is a learning experience and uh you know this is where we need to work together and we're like okay well let's set a naming convention for our files and you know let's not make let's make sure that it doesn't conflict but again these are details let's focus on the results here and um so you can see the face graphics is using all of these shapes okay the stars the lines as i've shown you here the planet and a lot of these are kind of like into mini components so for example you have the planet and then the planet is using um ellipses and you know and different shapes and then this the saturn ring uh the ring here is not being previewed but you know you can see that we're using all the shapes and then we're coloring those shapes okay and with many many hours later you get into a really fantastic result yes so the webcam is not working i have to disconnect and connect it again so give me one second all right i'm back hopefully it works all right um as you can see here we have um you know all of these amazing graphics completely done in code which means that if i look at the file size look at this you know each of these are about 1 or 2 kb right this is completely dependent on how much code you have you compare that to let's say a png file which is completely static and completely merged then you have something that is fantastic on top of that what we tried to do and i'm gonna show you this because i find this to be an important uh workflow we we made sure that all of these backgrounds can adapt to the biggest screen possible so i thought well you know let's be future proof let's make sure that this eventually works on apple tv for example if we decide to make an apple tv app or on the ipad 13 inch which has a resolution of maximum 1366 so as a result you want to create these backgrounds and these shapes to be centered because that's how swift ui works everything every ui is is set from the center i'm going to show you the implementation later but i just want to start from the workflow first and and so my designers are essentially uh creating all of these shapes based on this the assumption that it will be used for bigger screens so just to give you an idea of how it looks like um on a bigger screen so for example the wave here and this this was one hurdle that we had was like okay well if your phone is set in landscape mode or if you go to the ipad then the shape is going to be cut right here so i thought well let's make sure that we have the fullest resolution possible so if i switch to the ipad i should have switched to the other one some some of these devices are pre-loaded so it's going to be faster but you can see it looks exactly like this on the ipad which means that it's going to work for some of the biggest resolutions out there and that's exactly what we try to do by the way this is not different from working on the web for example so when you work on the web you have to make sure that your website has a background like this that is going to fit inside the biggest screen possible in fact the web i would say is even crazier than this you know you would have to take care of a resolution of 3000 because now we have a 6k resolution you know pro xdr display and so if you maximize the screen for your website and this is also another hurdle that we had for design code is that you know if you have like a super huge resolution uh desktop then you have to make sure that all of these shapes are going to be able to to work on all of these big big resolutions and this takes a lot of time and implementation to get right but like i said you don't have to do it as a developer you can ask your designer to do it as long as they welcome the idea of being part of that workflow and of course this is a lot about the teamwork so all of these backgrounds all of these shapes will be centered position and can work on any screen resolution possible right that's it that's important now let's take a look at some of the basic code so today we're going to learn exactly that and you know we're going to learn how to do a basic layout like this now we can't get to every single detail but we can get to this point where you know we're setting a tab view and then we're going to set like the tab view style and we're gonna be able to swipe and uh you're gonna be able to like set different animations and we're gonna explore the outline the background blur um the masking effects the text gradients and all of that stuff sounds good so before we get started i just want to say thank you for being here and if you like these streams please give a thumbs up it helps so much to get this content out there to get in into the the eyes of more people who may be interested in designing code and use this as a career path and eventually find a job or either as a designer or as an ios developer and web developer and i think this can be really useful to a whole lot of people so you know with with your like and your subscription is going to help us a lot and uh yeah so let's get started we have the design and i like to start from scratch um another another little thing i want to say is that these streams are not always 100 you know uh butter smooth okay so you know when you do live coding is a very difficult thing to do okay regardless of how much experience that you have so please be patient sometimes i will get into problems and it's not that i don't know it or that i don't know the solution is that sometimes it requires a lot of debugging time and i don't want to bore you and and try to kind of retrace my steps and finding and then confusing you so sometimes i decide to skip some of these steps because they you know they would get in the way of your learning so that's all and you know let's be patient um let's have fun and let's learn as much as as possible together so let's start with this layout here um you know i love to think of you know xcode as as a really good prototyping tool and every time that i work with it that's exactly what we do so we're going to start with the title here and it's going to be okay learn design code okay make sure that there's no space and now you have your title we're gonna set this to the dynamic type which is font large title and then we're gonna set to bold okay now we want to set more so we're going to set this into a v stack and then we have two more texts so 180 120 hours of videos and now we also going to set the font i believe this one is going to be a sub headline if i'm not mistaken so 13 definitely get used to all the dynamic type so for example you know 13 is going to be cal out or i believe there's another name for the subhead and you know get used to all of these values because these values are going to help you so much when you're going to be designing and developing a lot of designers they start they think that everything single font size is custom made yes if you have a lot of experience with that but it does help to know the different um the standards for the font size especially it helps to know the dynamic type which is going to help you with this accessibility options so you know i try to use it for every single of these texts to use dynamic type sizes so large title is going to be 34 and then 15 i believe i don't remember them by heart but this is sub head and this one is i believe subhead as well let me let's just make sure that i have it correct or footnote so footnote all right footnote and we're going to set this one to font weight semi-bold then we're going to set another one for this the third text and this is going to be sub headline and boom so if you want to align this to the left we're going to set alignment leading and we also want to set some spacing to 16. so again dividable by four as much as possible typically 16 is the most uh used value in term of padding in ios in fact if you don't set any padding at all the default is going to be 16. so like this for example all right so this is the the design that we have so far let's let's get this into the card and we are going to use again swift ui inspector i've been telling you guys a lot about this tool which is amazing so we're gonna get simply the colors of the gradient and i like to be able to do this quickly because it takes a lot of time to code the gradient so what i'm gonna do here is uh after the padding i'm gonna set a background and then i'm gonna paste my my gradient um yes that's correct i just want to make sure that i'm doing it correctly and we can add another padding and let's set it to 20 this time or even 30. 20 and then the padding here is going to be 30. just like in the design so 30 roughly i don't want to get too much into the details but that's roughly it and then 20 from here and so we have the card and again i explained multiple times about the ordering so let's make sure to set the corner radius we're going to set uh not corner radius because we're going to use the apple um corner radius and it's going to use a mask rounded to rectangle you using a corner radius with style we're going to set it to 30 and continuous so this is roughly what we have in terms of the card and what is going on here i don't think that i haven't made a mistake let's see oh sorry i i use corner size and sometimes the auto completion is definitely in the way so corner radius all right so make sure to use corner radius the other one is using cg size so it's different now this should this should be good and before we get into the the outline and stuff like that i want to show you how to use the tab view and how to do those swiping cards this is super simple so what we're going to do here is first we're going to create a sub view out of this but before creating a subview you're going to need a parent container in this case i'm going to use a z-stack z-stack is great because if you want to have like a background or something like that then you want to use a z-stack and overlap things together and now i'm going to put this an extract subview i'm going to use a different name so let's say onboarding card view so notice that it applying to both at the same time which is kind of awesome and now it creates my component and so imagine that each card can be swiped and what i'm going to do now is i'm going to put this inside a vsac first and i'm going to change the v-stack to tab view okay now what is it have you the tab view is essentially what you would use for your tab bar and you have like multiple menus but you can also use that for creating this pagination so you're going to need to use dot tab view style and by default it's going to be the default tab view now this is another thing that a lot of people don't pay enough attention to is how to check the documentation in xcode right and you know your best friend is the option key and you have this question mark click on it and you're going to get the summary of it you're going to get some code sample and from this it's going to teach you so much about all the things you can do in xcode and definitely take uh take a lot of time exploring those things so in this case i want to know what are the different tab view styles so i'm going to i'm going to click on it and then it's going to give me the full explanation you know where it's available in terms of the different platforms such as ios mac os and also the different styles so in this case i want to use the page tab view style so let me just copy this and again you can search like it's fantastic documentation in xcode is fantastic so i'm going to replace this by the page view style page tab view style in it and when i do that then i have access to my beautiful you know pagination now since i don't have multiple cards i don't have it yet so let me get three cards okay and then boom look at that that's all i need to do apple is like completely spoiling us as developers and designers in terms of like being able to do this cool ui with just a few lines of code this is why i love swift ui so yeah if you enjoy these techniques uh give a thumbs up and just comment say you know this is really cool i'm learning something today really appreciate it so all right um now we're gonna take care of the background so the background uh we're gonna check the gradient first so this is the gradient i just want to make sure that i'm selecting the right thing uh let's take a look at this one all right so this one is using this gradient and i'm going to copy the code and i'm going to paste it right here so yes i'm going to get into stroke and overlay but first let me take care of the of the background because if we don't have the background you don't see these little dots and yeah you're missing out because these dots are amazing it's part of the tab view style so we have the background i'm also going to use ignore save area and so it's taking the full screen including the notch and i'm going to yes so i'm also going to set this into a mini component because i don't want this huge piece of code to be in the way of my structure so what i'm going to do is i'm going to create a background component of type some view and i'm gonna put my gradient right there okay so let's resume this should work oh yeah of course you have to include it right so it's called background and voila now this is where we're going to start using the shapes that that our designers have created and what we're going to do here is first of all i'm going to put this in into a z-stack first so i can show you the problem that we're going to face the background itself is called wave parentheses it's one of the the graphics here okay and yeah we can take a look at it so wave is a linear gradient using a mask and a mask is using the shape which i've showed i've shown you earlier and again everything is in code and you can customize the offset the width the height and everything is centered which means it's going to work against any screen size which is beautiful so um you know you can also change all of these colors in code which means you can animate them you can make them dynamic you can use data and so that's awesome if you're a developer this is your dream right like you want to make sure that everything that you have here can be um can be made dynamic using data and that's exactly what we we can do when we're not using like let's say a pdf file right so um so this is our wave and what are you noticing here is that if i'm using the wave as it is it's using the maximum size it's kind of like pushing everything and when it and you don't want to do that you don't want to push everything because it's going to make it so that your your tab view ui is also going to follow that size and and that's exactly uh what we want to avoid so instead of doing that if you don't want to make it use the full size you can do something called overlay and then you put the wave inside and boom and maybe not overlay since you want to put it in the background so it depends if you want to put it in you know in the above or below the linear gradient yes overlays is correct because i want to put it above the gradient if i put it as a background it's going to be below the the gradient which means that it's not going to be showing okay and then uh since i'm using the overlay method i don't need my z-stack anymore and if i want to use multiple backgrounds then i'm going to need so let's say i want to use a second background called waveone parentheses and it's not going to allow me because i'm going to need to put this inside a z-stack first so let me put this into a z-stack and then boom we have two backgrounds one on top of another so we have the first wave and then we have the second wave okay so that's how you set up the background and uh yeah now now that we have the beautiful three dots here okay so you see how these lights are changing when i switch now i also want to be able to make this into the ui that we see here the first thing i want to show you is how to set uh the the text gradient so you've seen it in the code essentially we're using the gradient first and then we're using the mask later and if i remember correctly that's exactly how you do it in css so i have a question here do you use light mode of dark dark mode colors typically um most of your colors are going to be set in the assets catalog for light and dark mode now it's not like it depends where you want to take your ui sometimes i do believe that you don't necessarily need for everything to have light and dark mode so for example what i decided for this is that this design is that some of these models and these windows don't need a light mode version okay and in fact you can get away with creating a dark mode ui and then not take care of the light mode at all the light mode i think it's important nowadays to have a dark mode ui because if you if it's really late there's very little light you're you know on your bed dark mode is so useful but you know when you have a lot of colors like this this still work well even during the daytime right and so to me we decided that you know we're not going to take care of the light mode yet so we're just going to have the dark mode for these some of these layers but for some of these backgrounds and some of these main uis we will have a light mode version though so for example you know this is kind of the light mode version right so this is the light mode version and uh but for for the uh like these models here we're gonna keep the dark mode or these pop over we're going to keep the um the dark mode and we're not going to change it to light mode so that's kind of the decision that we have decided so now back to this i'm going to do my text gradient and yes it's here so first of all i'm going to need the gradient let me go back to my ui here i'm going to select the text and i'm going to copy the gradient code then i'm going to paste that gradient right here so now because it's a shape it's going to push everything to the maximum so what i need to do is to set a frame size especially for the height so we're going to set the height let's save to 140. now what we're going to do is that we're going to use the gradient as the the content and we're gonna use the text as the mask so let me just cut this text and i'm gonna use dot mask and then paste the text inside it boom see that this is how you do a text gradient and it's quite easy and in fact using the mask you can you can do anything with that you know you can use a circle you can use any shape that you want in this case we're actually using a text which is super interesting so um i also want to set it to three lines of text so there are several ways to do either you can set a frame size and make sure to do that or you can also do a little bit of hack and you can set the non-breaking space right here like this now the text is going to be centered within its frame which means that we're going to set the frame and set the alignment of the frame so we're going to set max width first and then alignment to leading so now it's going to go to the left side oh yes another thing about orderings super important the font has to be right after the text and not after the frame modifier so a lot of people are going to make this mistake when they're they're starting out in swift ui but you know you get used to it it makes a lot of sense so now i have my gradient here and now i'm going to set the color foreground color.white i'm going to use opacity 0.8 or 0.7 and i'm gonna do the same for the second text and voila awesome so so far so good we're already at 30 minutes so we have a lot more time and now i'm going to set the outline so notice that the outline here using the same technique it's using an overlay effect so it's taking the color of the background and it's also using a gradient alpha so and also it has a glow which is kind of cool and um you know in swift ui is quite not that difficult so the first thing is i'm going to take a look at my container so this is my container okay and i need to make sure that we are after the mask because remember the mask is is clipping everything which means that we need to set it here and i'm going to use an overlay the overlay is going to use exactly the same shape as the rounded rectangle of my mask okay and when you when i do that you're gonna see that my rounded rectangle here is set to a shape of the size of my container okay and this is where you can set let me just set the indentation we can set to stroke because we only want the outline and so we're turning a shape into a stroke which means that we have the outline and we can also change the color using the stroke to let's say white okay now we have the outline with the white and we can also like customize the line width sometimes you can use 0.5 this is more like a hairline you see that on ios they do that a lot they have some hairlines that are super thin thinner than one pixel or one point sorry and you can definitely use 0.5 for that um but otherwise you can also use one that's fine now for the gradient we are going to use the gradient instead of color so everything can be customized so let's let me start with this one and is it this one i think it's this one but otherwise i can start from scratch as well if it's not the right one so my linear gradient okay so when i do that it's best it's basically a gradient that has uh 100 white to zero to zero percent white so that's how we get this great gradual gradient that we have here and we're using the stroke okay and you know that's just fantastic so it creates this beautiful effect here on top of that you can also apply a blending mode on this shape which is the round rectangle uh one one key trick that i like to use is like um double clicking on the parentheses to see when it ends so after stroke i'm gonna use blend mode and i can use overlay so this is going to make my outline to use a blend mode which is really cool uh when you're able to do that and you have like beautiful colors in the background so it it creates a very nice it's just like the same ui that when you do hey siri and then you have these results and the text are more vibrant it's using vibrancy it's using blending modes and you know that's why we use blending mode right here now for for the glow it's essentially the same technique you can definitely copy and paste the same code over and over and for example i want to use the overlay and the overlays using the exact same round rectangle i'm going to apply that to to to nesting that essentially so now i have a second overlay and instead of using blend mode or i can also keep using blend mode that's fine but let me replace this by blur instead and we can set it to let's say five so that we can see it there you go so yeah now you have this glow of your outline which is beautiful and if you want to make it more visible we can definitely set you know the line width to be bigger so now you can see you can make it more visible because um the more uh the more weight that you align with has then the more impact that it has on the glow on the blur and so you can set it to 10 let's say so now i have my beautiful glow here um and of course you can play with the opacity and so on and yeah that's that's how this we get this beautiful effect here you can play with the line with to get a stronger glow right and uh a lot of fun if you're a designer this is this is right up your alley i know developers if you're interested in design this is also something that you're going to have a lot of fun with now let's talk about the background blur because this is an interesting one and you know when i designed this i realized that it was going to be a challenge to create this gradual background blur because if you think about it we know that we can create a background blur with with a full you know opacity on all sides but to be able to do it gradually is impossible so i had to figure out a way to do that and to achieve a similar result not exactly the same but it works so you can see here it's blurring the background so the technique that i'm using this is something that i i shared recently on twitter is to combine blur and background blur together and that's really interesting because that's that's what creates like beautiful effects that you're gonna see on stripe uh of course not not as good or you know because when you have these shapes here it's either you have a full shape or sometimes you have part of the shape that is blurred and that's something that i wanted to figure out how to do it and sure you can go the stripe way actually i don't know how they did it but they probably use webgl or something very complex or sometimes you can use like you know libraries and stuff like that but i like to figure out like inexpensive ways to achieve similar results maybe not as fancy but definitely you know cool looking to some extent right and again this depends on how you're able to you know to spend your time into researching these things but you know this is from my experience and i have to think about efficiency as well i have to think about the time that i have to spend on learning these things so the way i'm gonna do it i'm gonna use a background and the background is going to use a blur sheet and in order to use the blur sheet as i've shown in the past is to use a library call i already installed that one for for time saving so it's called swift ui x i'm going to import that and when i import that i'm going to be able to use visual effect blur view and i can use one of the styles so system material is what sets light mode and dark mode automatically or you can use the specific one that is light or dark and you have multiple variations of thickness from ultra thin to ultra ultra thick and in this case i'm going to use ultra thin material dark and it's going to look like this so by default it's set to blue and now we have our background blur it's not going to show properly until you press on play by the way and there you go so i think i put it in the wrong place i'm gonna put it here instead right so i'm putting it below the text and now i'm gonna make sure that i have the background blur with the corner radius so i'm going to use mask rounded rectangle corner radius not corner size and it's going to be 30 continuous and voila so the challenge that we have here is how do we create that um you know that gradient alpha so i'm going to show you what doesn't work and i've tried it so you can definitely try to use let's say use a mask on the background blur and the background blur using the mask the mask could be using a a gradient okay so i just want to make sure that i don't waste your time here but let's see if we can do this quickly and okay let me uh click on the plus sign and the speed is not helping by the way so okay it's on my second monitor and we're gonna set linear gradient so if i set the opacity because that's what masking is all about right so to be able to mask using opacity you're gonna see that it removes our our blur does it wait a second i'm not sure that's actually interesting because i i definitely tried it but it seems to be working okay this is really interesting because i i'm pretty sure i tried it and it wasn't working properly okay let's see it's actually if it actually blurs so it does seem to be blurring okay that's awesome so mask round rectangle fill linear gradient top 100 percent bottom zero percent opacity and it does work so that's all one of my problems um so um you can also like add more colors to your gradient so for example if you wanted the 100 to be separated by three colors so now we have the 100 blur right here separate in three parts so that actually works that's really awesome all right well i was gonna do the other way which is equally awesome okay and but this is this is fantastic um let's move on and we we can do the other way on the bigger um the bigger one so we have two layers and the idea was i wanted to put the graphics behind this one but above the background layer and i wanted to create this beautiful kind of blending effect of the two cards together and that's why we needed the gradual thing and so all right so let's create the second now first of all let me just maximize this space here and i'm going to put this inside a v stack so i have a second container and the second container is also going to have the background modifier with padding so let me try that i mean once you get used to swift ui you know you get used to the idea of modifiers and how to move them around it's really fun it really saves a lot of time and so in this case you know i have the background i also want to use the outlines so i'm going to use the whole overlay and the whole linear gradient as well so we're saving a lot of time right now and so instead of from top to bottom i'm going to use from bottom to top so i'm going to i'm going to change the stops of my gradient so this one is going to be opacity zero okay and so it's from the bottom and the outline is going to be the other way as well so let me uh cut this put this here cut i'm just moving the color the the color literals okay so this is for the gradient i'm gonna do the same here okay and uh make sure that i have the right one okay so the outline is from from bottom to top and now we have the gradients so let me i just want to make sure that i'm not lost in my code here um because especially with gradients it's it's quite easy to get lost and all right so overlay background well anyways i have my background okay and this should be after okay so we're starting with this and i'm going to put this here now what i want to show you is that instead of doing this we're going to use the other technique so remember that we have a background and it's fully you know it's just full and we're gonna make sure that we have the rounded corners all right it's getting a little bit slow not good let me just get this code here all right so i have my rounded corner now instead of using this technique which using the mask okay i'm going to use blur this might be a little bit more uh performance heavy by the way so just need to make sure that you understand the cause of some of these techniques and um uh another thing that i'm gonna do is setting the padding from the bottom maybe 60. definitely maybe not yeah we just need to set the the ordering properly so you know we have a bigger card here of course i can use like a a size i'm deviating a little bit um because i definitely did not expect for this to work so it kind of got me off guard in a positive way but sometimes it doesn't always work the way that you anticipate it so okay so we have this so far and instead of using the masking now we're using a blur plus the visual effect blur and so what is interesting about this is that let me just you know set the offset and show you the result so now i'm simply moving that so you can see that it's blurring whatever background that you have and especially when we're gonna have some sort of a graphic in the background but you can see that you know it's it's achieving the same effect it's also achieving the you know the gradual alpha masking here and that's exactly what we want so it's two different techniques but achieving the same result now next we're gonna get into the graphics so this is a full graphic created in code and we're going to apply that right here so let me put that as a background to the tab view and the graphic itself is called face graphic and uh i'm not sure why it's not working oh yeah okay yeah sure so that's because i set up some dynamic stuff so i might want to to set the selection um let me just solve this quickly first with some binding you don't have to take care of this one for now i'm just going to use a constant to zero for now okay so this is my graphics and it's already animated um and the animation is really simple so the face graphic itself as i've shown you is essentially just like any image and you're using a background of your of all the cards and so um if i swipe this yeah so if i swipe this the background remains because the tab view is what controls the interactions of the cards and so if you're adding a background the background doesn't change itself but the cards are going to move okay let me just fix my my camera again okay this is the last time uh next time i'm just going to close my camera but we're almost there so we have a we have our cards obviously missing the details some of the details again i'm going to share the source file so you can explore this later with all the interactions with all the animations and at least you know where to start and that's the most important part understanding the workflow understanding the techniques from scratch you know with with a lot of with some directions and then if you want to explore more into how i did this or that you look into the source file and then you you figure out okay this this is actually pretty easy so um in terms of the graphics i'm putting it as a background to the tab view with which is what controls these cards and uh i'm just losing my train of thoughts let me um okay so the graphics so you know i'm not going to get into the data because the data is quite easy if you have taken my course or if you have taken any tutorial about swift ui you know that with any component you can set the variable and you can replace it and you can pass the the variable the values to that component and so for each of these cards you're going to be able to set different content for each of these components and so that part you know you're going to find tutorials everywhere online what i want to focus on is on the techniques that you're not going to find anywhere online because not enough people explore these things so let me just get into so the face graphics yes how do how to do the animation so for your designer what you want to do is that tell them okay you want to create this component and you want to set the animation on this component so maybe i can start from scratch maybe um if if it doesn't go wrong okay let's just cross fingers because when i do these things it doesn't always work perfectly so please be patient i like to be able to show you from scratch so i'm just going to remove some of these code really simple animation values here and i think that's it it's going to give me an error because i'm passing the argument here so i can definitely remove this argument and i believe that we should be good so oh yes of course the other one sorry yes this is what happens when i try to to show people from scratch um doesn't always work perfectly so we also have more code here all right hopefully this is all oh yes we have the preview all right let's cross fingers in the meantime if you have any question i can answer at them at the end of the stream so any question you can ask and i'm going to be able to help you if if the question is in my alley so all right this is this is what your designer is going to be working on as i explained in the last live stream they're going to be converting the shapes they're going to be using a gradient and then they're going to be masked using a mask and to color that shape and they can compose it you they can align it in in the center and then from there as long as it fits any resolution possible you can fit that into your ui as an engineer as a designer who codes and it's beautiful right you want to be able to to let them do their thing and you you can do your thing and the two worlds combined creates a beautiful piece of art well to some extent because there's a lot of functionalities here um so all right now we want to tell them how to animate so let's say they have this phase graphic here and we want to tell them okay go crazy with the animations we're going to start with the state var and the we're going to start with up here so when appear means that when the view is seen it's going to change the state or it's going to yeah you know it's an event when the view is seen whatever element that you have excuse me so i have my state and now i just need to figure out where to put my event so i'm gonna click on the z stack and right after the z stack i'm gonna set unappear as the event itself and so on up here when the view is being seen i'm going to change my state to true and using this state change i'm going to be able to animate my ui and that's it so from this stage change i can set the beginning and the end state of my animation let's start with a simple one let's see the yellow planet so the yellow planet is right here is using an offset my designer was able to recreate this encode color it and set the offset so that it's composed in a way that looks exactly or almost exactly like in figma so now they're gonna they're gonna be able to animate it so i'm gonna do up here question mark and at the end so the end state is going to be uh whatever they have otherwise set it to zero so now it's it doesn't have any transition so it's it's simply going to jump from one point to another if you want to add the transition animation we're going to do with animation on the stage change like this and we can set one of the animation presets such as linear ease in a timing curve spring and so on and we're also going to add a duration and in this case i'm going to set it to 10 seconds because i want a slow moving planet and then my state change to true so when i do this and when i click on play i'm going to see the position change of my planet and so your designer is going to be the one who's going to be playing with these animations and so this is the basics of it and um so appear you know they can move from right to left oh sorry from right to left so this is the beginning state and this is the end state uh like 300 let me just uh yeah one thing you you can do is just press space and it's going to reset the animation okay so maybe 300 is a little bit too far let me set to 200 all right are we gonna get there yes finally so we have the planet that is moving and i can do the same with the other planets so for example i can do up here question mark so end state and then uh you know maybe i can move it a little bit more like this so this is the purple planet it's moving a little bit and i can do the same with the red planet so appear question mark like this hours and hours of fun right like that's just a lot of fun for your designers now when i have this animated i go back to my content view or sorry the onboarding view and i should be able to see my background that is animated just the way i did it and it's animated in the background like this right so the more complex part and this is where it might really go wrong and i hope it's going to go well but the gist of it let me explain the logic behind it what i want to do is let me just show you the demo so you understand kind of like what i'm trying to do here so the idea is that when i change the tab view sorry the tab card it changed the selection index okay and using the selection in the exchange i'm changing the background itself so that's what allows me to change the background when i switch to different cards so that's the logic aspect now going back into the code there's one thing that you can do with the tab view is to set a state for selection and attach that so i'm going to set it to zero by default the selection is which card is active okay and uh you're gonna attach this to the tab view and set this to selection then i'm gonna attach that using binding to the tab view and so let me give you um a demo of how it would work so i i'm gonna set a text on top of everything and i'm gonna put the selection number and hopefully you're gonna see it right here so right now you see zero when i switch it's still zero and so one solution that i found was to to set the tag to zero for for the first card tag for the second card and for the third card so zero one two so now when i change see the number here is set to one instead let me make it white so that you can see it so foreground color dot white okay there you go so you see zero when i switch to the the other card it gives me one when i switch this to the third card it gives me two using this number i can essentially pass that value to each of those graphics and and and set the animation based on that event change and so what i'm gonna do here is go to the face graphic again this is a little bit more advanced so the first thing is i'm gonna set the binding for the selection so binding means that you want the value from this component to be in sync with the value of the selection of the parent component which is the onboarding view so selection of type integer and when you set a binding you're going to have to set the preview and the preview is going to set the selection so uh this is just a default so that your preview works so the way swift ui works is that it needs to it needs this piece of code to be able to run the preview based on whatever default values that you have otherwise it's not going to be able to run the preview at all so in this case it needs to know what is the selection by default and this is necessary for the binding so the binding set it to here and now i have to bind this from the parent view which is on boarding and i have to pass remember selection to the selection state that i have here so everything is now in sync so now my face graphic is going to receive that value from from the parent okay and using this value i'm going to be able to disable enable the animations and whatever right and that's what allows me to to change the background and reset the animations on this demo right here so let's do the next one um of course i'm sure there are better ways to do these things but this is how i i found it so i'm going to set the state and i'm going to say active and it's going to be let's say true by default if i remember correctly i just hope that i don't make mistakes so face graphic and then blob 2 graphic so yeah it's active to true by default okay and then what i want to do is just the same way as unappear i have another event called unchanged and this is a really really interesting event that you can use in swift ui and you can unchange allows you to detect the change of whatever value that you have in this case i want to know whenever my selection is changing value then i can respond based on that change so you know i can decide for example i can set active to false and so on in this case what i want to do is i want to create a function that is going to manage all of these things together so i'm going to create a function called update and in this one i'm going to say so this function is going to be called from here and it's also going to be called from unappear because these are two different things this one says whenever this is being viewed by the user it's going to run this this one is like saying when i swipe the card to the second card or back to the first card this is going to run my update function okay i know it's a little bit more complex again take your time to to understand the logic aspect but as you get more and more uh you know familiar with swift ui these are some of the things you're going to learn to to get used to so first of all i want to use the selection value to do something about it so i'm going to say if selection is equal to zero so which index value that i that i'm using then you know then make it appear otherwise make it disappear or set appears equal to false and um the same with um let me see i just want to make sure that i'm not making a mistake here the second thing that i want to do so this is different animations this has a different duration linear animation and so on the other one can um let me just uh reference yeah i'm i knew i shouldn't have done this but i hope it's useful i so selection and then with animation yes i'm also using active the reason why i'm using active is so that it i make it fade in and fade out so that's that's how i'm able to disable the background and switch the edit to the other one so we have the appear which is used to start the animation and then we have the active to be able to fade in and fade out the whole face graphic and the whole um blob graphic so you know again different types of animations so with animation and then i'm gonna do active is equal to true and then active is equal to false so the selection is like saying okay which card is being selected from the parent and this is saying zero being the first card so if this is the first card then show this background right here if not make it disappear and so i'm also going to use the active and in this case i'm going to simplify everything i'm going to use the opacity modifier and i'm going to say is this active if yes set the opacity to one otherwise set the opacity to zero so fade out and now that i'm also using the the width animation which allows me to fade in and fade out between those backgrounds so if this goes well i'm gonna go back to onboarding we're doing live so a lot of things can can go wrong for sure boom see that beautiful i was really lucky here because i was scared that was i would not work but this is the goal right the goal is that you go to the second card and you change the background you go to the third card you know you're passing the selection back and forth you're binding it you're synchronizing that value and all your designers need to do is going back here and they're like okay i have two states the first one is up here and i'm i can animate my planets i can animate my lines and the second one is is how do you want to animate when your face disappear when your graphic disappears you can decide to use an offset value you can use um you know a transform value you can use a rotation value whatever it is you have control because you have these two events these two states that gives you that superpower and so yeah you know that's it and the rest is just to say um you know i'm gonna put three backgrounds instead of two so first i'm gonna put this in into a z stack and then i'm gonna put the other graphics so blob 1 selection and blob 2 and then pass the selection again super important to pass the selection so that this graphic knows when which uh you know which card is being selected therefore when i switch it change the background and then change the background again and back and forth right beautiful so yeah i hope you enjoyed it this was not planned but i really wanted to show you how i managed to do this effect of course in terms of the details the design and all that stuff you know you can definitely do it yourself uh it's a lot of fun as a designer you can definitely play a lot with this so again i'm gonna be sharing the source files to to these including the one that we're doing live and also the one that i prepared before doing live so it has slightly different ui uh you know some things i was deviating a little bit and uh yeah you know a live stream what can you do right you i'm doing my best and uh i'm trying to to teach as much as i can so again if you really enjoyed these things these live stream these techniques and these explanations uh please give a thumbs up really appreciate you listening and um you know and having fun and exploring together on these uh these things so let me see i'm gonna answer some questions and then and then we can call it a day so we have some questions here swift ui documentation is very short i see a comment here yes it has some of the elements especially the more obscure elements tend to have more shorter uh documentation but what i can say is that since with ui 2 the documentation has improved tremendously and i'm anticipating that in in a couple months with swift ui 3 it's going to get even better so and of course you can google all of these things and apple has the documentation online on top of what is available inside xcode can you use an overlay and then use the stroke modifier so the stroke has to be applied to a shape so you would have to put the shape inside your overlay and then the the stroke modified to your shape and that's kind of like the the logic of it some modifiers are compatible with some things you can't use modify on a modifier you can use a modify on a shape or or a stack and some of the modifiers such as fill is only available to a shape or a font is not going to be available after a frame so there's a lot of these small detail logic that you will get used to and it's going to make a lot of sense do you use light color mode so i already answered this one any design tutorial so we have a lot of live streams about ui design and i've been doing that a lot over the past few weeks and i you know urge you to take a look if you want to learn design we learn the same things here except in figma instead of xcode and of course i have a lot of courses in the description ui designs you know ui design handbook ios design design system in figma ui design for developers a lot of resources that you can learn for both designers and developers because as a designer who codes all my content is made for anyone who can understand code or design at the same time so a developer can definitely take a lot of benefit from this perspective so do you have a video specifically on the wave so the wave is um you know is um yes i mean i i covered that multiple times in my live stream but you can either go to the plugins and there's a bunch of plugins called like get waves and stuff like that or you can design it from scratch if you want so if you want to design it from scratch it's going to take more time and patient for sure but uh let me see oh yes i have to go to edit mode first and then you use the bend tool the pen tool allows you to bend some of these things and then you want to play with uh you know these bezier curves and you know apply the band tool again and so you create this beautiful shape and then you put that in the background so at the end of the day once you're done with this you copy svg and you turn that into swift code so that you can color it using gradient and mask in your swift ui file so yeah like like i said the beginning is very simple and i think most people are able to follow the beginning but of course we want to get to a point where you know exactly how to do this ui here and so when you get to that portion you need to spend a little bit more time on the logic aspect if you have done code in the past such as css and javascript i don't think this is too complicated but if you never code it before start with the basic parts start with the graphics start with the modifiers um and then eventually you can move into the the more complex aspects such as binding the state and again you know if you have developer friends they can help you with this again i have a lot of tutorials we we just recently got to 85 swift ui videos and a lot more coming so we have a lot of exciting contents all right so making a plugin no can you create an app visually dragging text boxes and card view and ads or no i'm not sure what you mean but i think you can basically do anything in swift ui or flutter or any of these programming languages and platform and ui kit you know and frameworks so yeah i think that's it again thank you so much for coming to this live stream and we do these uh every single week on friday at 3 p.m so if you enjoy these please give a like and a subscribe and click on the bell notification that you so that you know and receive a notification when it's going to run next week at 3 pm on friday so i'll see you next time bye bye

Channel: DesignCode

Views: 15,328

Keywords: iOS development, swiftui tutorial, animation, text gradient, gradual alpha mask, tab view pagination, background blur, selection state, binding

Id: zpG4uvLiYTU

Length: 78min 51sec (4731 seconds)

Published: Fri Apr 09 2021