Introduction to Core Animation (iOS/Swift)

[Music] hey everyone welcome to the swift arcade i'm your host jonathan rasmussen so excited for this week's episode today we're going to get into what i think is one of the most confusing things for new ios developers core animation what is it how does it relate to ui kit how do i get things to move around if you've been puzzled stimmed and you don't understand how this framework works come on in and today we're going to figure it out together all right so what is this thing called core animation core animation is the library that sits underneath ui kit swift ui and is pretty much responsible for every animation you see that happens on your iphone it sits right here under ui kit and app kit just above core graphics and whenever you come across ca whether it's layer gradient shape or animation that means you're touching the core animation library now just to be clear we don't always need to be working in core animation ui kit has a whole host of higher level animation apis property based animators view controller transition physics based animations normally we want to be using these when working up there in ui kit so why study core animation at all well i think there's two really good reasons to study core animation one is sometimes the animation you want to do using these higher level apis just can't be done i need to drop down into that lower level core animation level to get the effect you want but secondly and almost more importantly i think it's really good understanding i really struggled with animation when i first got to ios i didn't understand exactly how things worked what was happening and whenever i googled and found examples that dropped down to that ca layer i was completely lost and that's kind of the point of this tutorial i want to introduce you to core animation from our first principal's point of view let's just see how things actually work and i hope that's going to give you the insight then to understand what's going on at these higher levels as well as drop down occasionally if you do need to do some really cool things okay so how does it work core animation basically works off something called the ca layer every view has an underlying ca layer and if you've ever wanted to round a corner add some shadows you've probably already worked with it before but it's in this layer where all the cool stuff happens and this is where we actually add our animations to our views for example if we wanted to move a rectangle from left and right we would create a basic animation specify what we want to animate by its key path and then define its before and after position and finally animate we can also scale things up here we can specify a different key path in this case something called transform scale and we can say that we like to scale from an initial size of 1 double the size of 2 over a duration of 0.4 seconds and we can scale it up we can also rotate things here we're working with another key path transform rotation z this is the z axis coming out of the view here we're working with radians if you remember your math from high school university this is the amount of angle that we're rotating but basically we're just adding these animations to our layer and then moving things along of course once you get really good at this you can start to do some really cool things for example if we wanted to shake a login box when someone entered an incorrect username or password we could do that using keyframe animations here we're basically saying here's our position x and we like it to shake it back and forth by specifying these values at these key times and core animation will take care of the rest it'll interpolate between them give it the shake and make it work so a high level that's kind of how core animation works that's how we specify some basic animations let's now jump into the lab and see what these things look like in action [Music] all right so let's fire up xcode let's create a brand new app here let's call this animation fun i go ahead and accept all the defaults there feel free to save it wherever you like i'm just going to save this to my desktop and we are going to do all of our work in this view controller here so let's just hang out here and make a little bit of space okay so the first thing we're going to do is basically we'll do a simple move i'm going to show you how to take a red rectangle like this and animate it over here looks really simple but there's actually quite a bit of things going on here that are good to understand so let's start by just defining this red rectangle and we are going to do that by basically specifying a plain ui view we are going to explicitly set its cgrect basically saying we're going to say hey i'd like you to appear about here with an x value of 20 a value of 100 and a width and a height we're going to explicitly set that rect then the other thing we're going to do is basically just give this some some properties let's go ahead and give our red view a nice background so our red view wouldn't be red if we didn't set its background color here to be system red and just one thing to note even though we're working up here with the ui view a lot of these things we set like these background colors and that they're often just passed right through to the ca layer behind the behind the scenes which is what we're going to see we're then going to add this view to our sub view so let's go view dot add sub view our red view here and that should be enough to basically get it on the screen let's just uh let's try the mini the 12 mini let's run it on there okay there we go so we've got our rectangle up there positioned at x of 20 y of 20 with a width and a height let's now animate this and i'm just going to copy in this function called animation and we will talk about and see how this thing actually works but let's just let's just animate it as soon as the view comes up here so i'm just going to call animate and run this again and let's see if we can actually get that red square to go left to right there we go okay perfect so what is actually going on here well this is your basic ca animation it's probably the most basic animation we can do we're defining an animation we're setting its key path which is basically the property we want to animate and now this is the stuff that's kind of confusing that you really need to understand this from and this two value how do we calculate these values of 20 with 140 divided by two to two value of 300 well this is where you really need to understand the core animation and core graphics coordinate system what's going on here is we're really animating the shape's position this is probably one of the most confusing things when you get into core animation what are we actually animating it's always this middle position or sometimes referred to as the anchor position that's what we're animating so remembering that the coordinate system increases as we go down into the right and understanding that our rectangle has an x y value of 20 and 20 to calculate this position or what we want to animate we need to take basically half of the width to figure out what that point is so in this case 90. so if we go back to xcode now and say we want to animate this over to a final value of 300 that's what we're specifying here with this from value and this two value so sometimes it helps to draw these things out we're gonna give a duration of one second and then we add that animation to our layer and i'm going to comment this out for a second and off we go but watch what happens when we do this and i comment out this final line did you see what happened there our animation reset let's watch that one more time it's going to slide over and then it's going to reset this is the two model thing i was talking about core animation has two models that it uses to track the different layers and how the animation is going the model layer tracks all of the actual physical attributes of where the view actually lives right now that's how we can round corners set its initial position that's called the model but when it's animating it's got this different presentation model which keeps track of the views as they slide over and when it gets into this final position we need to update our original model with what the original animated position looks like that's why we need this line here what we're basically saying is when this animation completes we need to update the view's final position to where it ends up which is at this 300 in other words this position right here so as we slide it over we need to update the final position with an x value of 300 that's why if you ever see your core animations do the animation and then reset it's because you're not setting its final value here which is why this line is really important and that's basically how move works [Music] alright next let's take a look at scaling how do you actually scale in core animation and to do this i'm also going to show you how to use core animation in conjunction with uikid when you need to know the size of the views i'll show you what i mean here in this example we explicitly define the position and size of our rectangle using cgrect that's really good for demonstrating core animation but it's not necessarily what we want to do when working with ui kit so what we're going to do instead here is i'm just going to define this as a plane ui view and then i'm also going to define some attributes or properties that i like our view would eventu that i would like our view to eventually be in this case that width and height of 140 by 100 now let's go in here let's still make our red view background uh look like this we're still going to add it but instead of animating in here and doing a work we're going to do one more little thing we're going to size this view once we know what the screen size of our iphone is in other words we're going to make it dynamic and we're going to do that by overriding view did appear so we're going to come in here override viewed it up here and once we get into here we know what the size of our device is it's it's rendered it's laid itself out so we can use that now to relatively size our view what i mean by that is instead of hard coding the size of this view we can use the properties of our view specifically its bounds to get the mid x the center point of our view the mid y so basically where the middle of our phone is and then we can take half the width half the height and draw an explicit rect here based on the size of the view so i just wanted to see this mechanic basically if you don't want to just hard code things all the time and you want them to be dynamic this is how you can do it so if we run this now let's just see if we get a nice red shape there we go a nice red rectangle showing up sized relatively to our phone size so this will work on any simulator now now let's take a look at how to do the animation scaling and animation looks something like this we're going to do the same basic animation how we control the animation is we're going to change our key path here is transform scale we want to scale out and by the way if you're curious you can look up all the different scale properties i've contained i've added a link to the bottom of the notes here you can go look up in the documentation all the different things you can scale so you can rotate you can scale you can translate these are all the different key path settings that let you control the type of animation you'd like to do just be aware a little bit in the documentation it can be a bit confusing don't just take rotation z or basically scale here and think that you can just add scale and translate it you need to add this transform string in front of it that's why you need to go transform scale not just scale so if you're a little bit confused with the documentation just be aware of that but that's basically how we can set these things so once we've got that in there let's see if we can just go ahead and animate this now i'm just going to call our animate method after our view did appear and let's see if we can get that nice red rectangle to scale up and there you go that's how you scale you might be wondering how do we rotate a view well it's the exact same thing we just come in here instead of doing this kind of animation we specify a rotate in this case just note we're going to rotate about the z axes that's the one coming out of the page so we have x y z comes out of the page so we're going to if we want our shape to rotate it's about that z axis and we're just going to specify in this case the unit of measure is radians not angles so we're going to go from a radian of 0 to 45 degrees which is pi divided by 4 and a duration of 1 second and if we run this now also remember we need to reset our final position which we're doing if the ca transform you can see how we can just rotate things very simply by in this case 45 degrees okay that's all pretty cool but what if we want to do something really neat like shake what if we want to take a view and shake it back and forth how would we do that well we can do that using these things called keyframes the way keyframes work is you basically define all the different positions you would like the your view to oscillate between almost like animations in a movie if you're animating something so in this case what we would like to animate is the x position in other words we'd like our red view here a red rectangle to shake back and forth so we're going to do that along position x and then these are the values of our keyframes we're going to say i'd like that position x to go from 0 to plus 10 to minus 10 to plus 10 back to 0. so we're going to add it subtract it add it subtract it that's what's going to move this thing back and forth those are the values and then our key times are here in seconds we're specified at the zero second we'd like it to be here at point sixteen we'd like it to be here half a second here eight 3 and that's what's going to make it shake back and forth at these relative times with the duration of 0.4 seconds so if we add this now to our red view here you can see how it shook back and forth we're just taking the shape reflecting it back and forth and that's how we can add some really nice cool shake effects to some of our views and do check out the source code i show you how to do this also to a text field in here which is exactly the same thing we would just change red view to text field and it would work for whatever view we put in there [Applause] [Music] okay so we've already done some really cool things moving rotating shaking what about this one what if we want to take that square and make it rotate around that circle how do we do that when doing animations like this i find it handy to draw out the shapes i want to make animate on the screen and then do my animation relative to them here so even though i may not want this red circle to appear it'd be nice to draw this out to see what this actually looks like so why don't we see if we can draw first of all the red square the circle and then we'll do the animation so let's come back over here to our red view and let's just say that instead of making this a rectangle we'd like it to make it a square of size 40 40. then we're going to define in this case i'm going to make something called an image view and we're going to draw our circle in there with a diameter of 300 then just coming down here we need to remember to add to our sub view our red circle so we'll get that in our view hierarchy and then let's come down here to view did appear and let's just comment out the animation for a second first of all let's just get our red box on the screen there so what we're going to do is just what we did before we're going to draw our box out here and the size of a square now note in this case i'm not doing the width and height and i'll explain why in a second i just want you to see that the midpoint of this screen is this corner right here that's where we're going to put our red square and for our circle we're going to draw this doing good old choreographics work here we're going to define the frame for our circle here it's going to be a cg rect in this case i am going to take into account the diameter of the circle because i do want it to appear in the middle and then we're going to use our ui graphics render which is a way in core graphics of actually enabling us to draw into an image which we can set onto our image view and this is how we draw a circle in core graphics we take our image renderer we say we're getting an image this is a call back in here where we can then define our rectangle do some core graphics work set stroke fill line in this case we're going to add an ellipse and then draw that path onto our context and if we do that we should get a circle showing up okay now perfect now look at this when i naively got into core animation and i wanted to make this square you know animate around here i do some googling i find the animation code and i add it just like this i go down to my animation code and i'd say okay let's animate something around a circle like this so what are we actually doing well this is where i find core animation it can really be confusing so let's slowly just walk through the coordinate system what's going on here so when we animate everything we animate is relative to the view that we're adding the animation to so in this case our red square which sits right here we want a circle we want to animate around it relative to this point right here or its position here so how do we do that well in this case to draw the circle we actually want to come up here half the diameter of the circle to an x and a y of diameter divided by 2 and a y of diameter divided by 2. that's taking it up here moving it in the negative x y direction and defining a point somewhere out here this is our bounding rectangle that's just a rectangle which is going to define our animation and then we're giving it a width of the diameter 300 and a height also of 300 so you can think of a rectangle going out around here now here's the animation we're doing our keyframe animation we're going to change the position which is the x and the y and in this case we're saying we'd like the position to change in the shape of an ellipse using our bounded rectangle so now we've got a path going around here around that bounded rectangle in the shape of an ellipse and then we're basically just adding other animation properties it's going to take two seconds it's going to be additive which means it's just going to keep going as you add it around there's these different modes there's a calculation mode and rotation mode which is paste and auto rotate i don't need these semicolons here but basically this just defines the animation moving around here and then we finally add that to our red layer and things should work but watch what happens when we run this because that circle is defined relatively oh i gotta call animate because we define the circle animation relative to that square and they're not perfectly centered look how the square moves it's moving not in a perfect circle it's kind of moving just off it's like the square isn't perfectly aligned with your circle and this just bugged me to no end when i was first trying to figure out core animation what's going on here well what can really make your life simpler when working with core animation is that understanding that everything is relative we want this circle to in fact be centered relative to the square and if we do that things will work out a lot better so instead of drawing our square out here just naively with an x and a y and a height and a width like this let's take into account that we want this square to actually be centered and center it in the position of our screen like this let's offset it and take the width into account the height into account if we do this now and see what this looks like this will put the rectangle right in the center and we'll animate it perfectly along those lines another way of looking at it is like this you can see here how basically we were just off because we didn't have it perfectly centered when we center perfectly here we get that circle right in the middle and then it's able to move perfectly along the path of our ellipse so you can just make your lives easier by taking whatever shape you're animating centering it relative to the path you want and that will just make your life a lot easier now to make your lives easier when playing with these things i've created a full-on demo which if you go into the swift arcade if you want the full text walkthrough of what we've just done here go into the go into the core animation intro and you'll see everything we talked about here the source code you can actually find just by clicking on intro here and going into demo and in there you will see a nice demo i've created just letting you play with these things i've added an animate button at the bottom so you can click and do these types of things and i just really encourage you to play with these things in really small baby steps it's the only way i was able to really understand what was going on drying things out you know drawing pictures like these obviously really helped and that's just a really good way to solidify everything that's happening okay well there you have it folks a quick introduction to core animation i was really excited to create this episode because this was something that really intimidated me for a long time as i gone to animation and i found so many different exam examples of what was going on ui kit core animation i didn't understand the mechanics of what was going on and just working through these i found really really help so now i feel a lot more confident when i go into using ui kit animations i'm not going to be intimidated by swift ui it's all using core animation behind the scenes and once you understand the mechanics of how these things work hopefully give you that insight it won't make those code bases anywhere near as intimidating as they need to be and you really understand at a basic level how animation in ios works and if nothing else you know how to rotate shake and move some objects well anyways i hope you found that useful if you like this video do click like do click subscribe i enjoy making these and do come back and we'll continue our journey learning ios things together okay take care everyone we'll see you next time bye-bye

Channel: Swift Arcade

Views: 4,518

Keywords: swift, ios, iosdeveloper, softwaredeveloper

Id: 93bfh3GK79s

Length: 24min 30sec (1470 seconds)

Published: Sat Jan 30 2021

Reddit Comments

[u/ninjafilm_com]

Thank you - loved this - am going to try it now!

[u/[deleted]]

Amazing!

[u/saifcodes]

Best teaching methodology 💯

[u/earlyworm]

Thank you for taking the time to create this. It's wonderful.