 Animations really add that special flash and touch in an app and it really enhances the user experience and in this lesson we are going to dive into the core animation API directly and we're going to learn how to use keyframe animations and combine them together and add them to an animation group so that you can create a custom animation or yourself that's composed of smaller animations or different animations inside of the group and this tutorial is actually a continuation of a keyframe animation series that I'm starting so if you haven't seen part one make sure you check that out it dives into more of the UI kit version of how to do more of a block-based approach but this is going to be actually using and constructing animations directly so let's open up Xcode and get started. So this lesson picks up where the other iOS keyframe animation lesson left off we're going to still be doing a lot of the same things but we're going to be building our keyframe animations using core animation directly instead of using the UI kit blocks-based API that we did last time so we'll be achieving similar results but you'll get to see how to actually construct these animations manually and how we can use them in conjunction with an animation group so this is going to be in in Xcode playground so you can go ahead and create one and get set up and if you want to pause the screen right now you can add in the code that I have here and this is just the code to get set up and just center a view in a view controller and we'll start working from here if you haven't seen part one of this tutorial I'll link a card up above and you can go and check that out but really so what we're going to do here is to get set up we have our code here for loading our view and positioning it so we'll create another function maybe right down here and we'll call that function trigger animations and we'll just call that right at the end of view did layout sub views now just disclaimer here when you are kind of modeling and prototyping this code positioning things and calling things from view did layout sub views might not necessarily be applicable for your app so keep that in mind for where you see me actually setting this up I'm doing this in the playground for a demonstration so you might not want to do it exactly the same way but the core of this tutorial is going to be an actually the animations themselves which you can apply anywhere in your app so just keep that in mind as we go through these things but so let's get started and we'll go and construct our first animation and then we'll talk about it a little bit and kind of see how it works from part one we implemented a lot of uiview.animate keyframes blocks right and we did individual animations inside of these blocks and kind of went through all the UI kit methods and APIs and so and that works and that's fine but you know there's a more manual approach actually animating the layers themselves so you don't really have to know too much about core animation to do these kinds of things but now that we're diving into this more we want to take a look at what a ca layer is because really this is the underlying thing that we're animating when we're performing these animations so looking at the documentation you know it's pretty simple an object that manages image-based content and allows you to perform animations on that content but really I think the best explanation is right here it's the backing store for views but it can also be used without a view to display content and the main job of a layer is to manage the visual content that you provide but the layer itself has visual attributes that can be set such as background color so on and so forth and when we go back to Xcode and we look at something like the view for example view to animate right dot layer you can see that it has a layer and we can command click and jump the definition and see that okay you know every every view comes equipped with the layer and if we command click on ca layer we can see here some of the documentation for what it is and kind of the different things we can do with it and kind of read up on it and see you know there's things like bounds position the z position anchor point lots of the things that we're used to seeing on ui views and so as we create these animations we're going to be applying these animations to the layer of the view and let's just get started with a really basic one so you can kind of understand how all of this triggers in so we can start with doing an animation for the background color changing this from blue to any number of different colors doing keyframe animation and so what that looks like is something like this we start off with defining a keyframe animation so color keyframe animation which is a ca keyframe animation and ca stands for core animation that's why they call everything with it or start everything with the ca and we'll use the key path initializer here and so this is the string and if you remember there are animatable properties that we can run animations on so background color would be the one we want to use here and we have to define it like this and at this point what we can do here is use a couple properties from this so if we command click into ca keyframe animation and read up about it where is it in here ca keyframe there we go we have we can see that it derives from a property animation which is another base class there are things such as values key times a path timing functions and a few other things here that you can you can read up on and use but we're mainly going to be using the values and the key times for our animations in this tutorial but let's go back here and start filling these in so for our color keyframe animation dot values it's a collection you can see and it's collection of any it's an optional collection what i'm going to do here is supply it with a few different colors so i'm going to start off with ui color dot purple dot cg color ui color dot blue or actually now it's already blue we'll do red dot cg color and ui color orange dot cg color and we're going to basically animate between these three different colors in an animation cycle and we'll also do something like this color keyframe animation dot key times equals an array of what so key times is going to be when a certain animation might start it's always governed between the values of zero and one so if i say you know i have a 10 second animation and i want to start it at i don't know the halfway mark i'm going to use 0.5 for the value and key times because that's right in the middle between zero and one and that would be from you know zero through 10 i'd be right at five or the middle of the animation block that's running so what we can do here is you know add some values there so we can say okay you know we want these animations to trigger from i don't know zero to zero dot 25 do something dot 25 maybe at zero dot 75 do something else and so the next thing we need to do is actually add in an animation duration right so how long is this animation going to occur i can say it's going to occur for maybe four seconds right um i can say something like i want it to auto reverse so it completes this cycle and then it undoes what it did um i could do a repeat count if i wanted to but um color keyframe animation that repeat count maybe equals three right and so we're all set at this point so what we can do is add this animation to the layer so view to animate dot layer dot add and you can see here there's a ca animation and then a key but the key is just the name of the animation if you want to subscribe to delegate methods and know what animation finished but i don't care about that right now so i'm going to pass it no um so color keyframe animation and no for the key and let's see what this looks like and so you see here they it's kind of animating through the colors it's going from blue to purple to orange let me speed it up that's a little bit slow i'll do it maybe over one second so it's a little bit faster you can see though it's animating through the colors and that's that's that's the basic idea for um how to apply an animation so let's continue forward and go through a few different other animations so let's try doing the position dot x or the animating across the x axis just to see so similarly we can create a um let's position or let's call it the horizontal position equals a ca keyframe for a key and this one's going to be called position dot x um and what i'm going to do here is for the values horizontal position dot values we'll go ahead and define that as zero to 100 for the timings we'll do horizontal position animation dot timings i'm sorry key times and let's see what would be a good value for that um we can do from zero to maybe zero dot three and there's one other property we're going to add and that's horizontal position animation dot is additive equals true animate player dot add the horizontal position animation for key no and i do need to set a duration on this we'll we'll bump this up maybe to three for all of them and horizontal position animation dot duration equals three um horizontal position animation dot auto reverses equals true and um we'll give it a repeat count of three now you can see this is kind of starting to get a little repetitive right i mean you're always having to keep defining these values over and over and over and i'll show you how we can use a group to eliminate a lot of this repetition but let's see what it looks like so there it goes and it's all it should go back because auto reverse is set it goes again and it'll go back but you can see here that i'm constantly doing you know i'm adding two animations i am repeating code repeat count auto reverses i mean yeah i could create a function and do some things to streamline this and just pass in parameters and so on and that would help but what we can also take advantage of is something known as a ca animation group so rather than having to do a lot of these things over and over i can create a group like this so animation group and on the group i can set the duration so that means this is the master time for you know these animations to run in so i'm going to set it to four seconds just give it a little bit more time i can also say the group is going to have the property of dot auto reverses set to true the group could also have the repeat count to whatever number i want and actually if you want to make this repeat indefinitely or infinitely basically you can do something like this you can do float dot greatest finite magnitude and that basically says run my animations forever and then the last thing here let's see we've got auto reverses set repeat counteration we need to actually define the animations that the group's going to have so animation group dot animations equals an array of animations and what we'll do here is we'll pass in the horizontal i think my playground is consuming a little too much power here let me put that on manual run horizontal position animation and color keyframe animation like that and then instead of adding these individual animations we'll just add the group so we can do view to animate dot layer dot add animation group for key pass and null and that lets us not have to repeat things like repeat count auto reverses and duration on the animations we can just set the values in the times because we've already defined this on the group itself so let me remove that let's run it again as a group and see what it looks like and it should look exactly the same it's just everything's running in a group now i also don't need that duration on the color keyframe animation because i forgot i set that on the group so let's add another one let's try doing horizontal one here i'm going to remove the is additive i'm going to change the key to opacity and all i'll need to set now are the times and the values so for the opacity we're going to do a fade in so for a fade in we're going to want it to go between zero and one one dot o for the times i think we can do zero to maybe six five so that means that at sixty five percent of whatever four seconds is whatever that time is the fade in will be complete and let me just call this opacity or fade in and i'll just change the name here and then we'll add it to the group so we'll come back to here and do the fade in as part of that array of animations and we'll run it now and we should see that fade in occur and then everything else that's in that group execute as well now let's go back and and then the fade out because auto reverse is set to true so again let's continue forward and add a few more so we've done where we did position dot x we can do position dot y and move it across the y axis so uh-oh up there we go looks like my playground was about to go haywire so position dot y and um for this one i think i'll use zero to 100 so basically move 100 down on the y axis for the times um i'll do it starting at zero dot six and we'll take that all the way up to one dot o and is additive i'm going to set that to true here which means again um we'll call this position dot y or vertical position vertical position there and there and um vertical position dot is additive and again that just means that from wherever the view is um because it's centered currently in the playground that it should move down 100 points from the center um because it's relative it's basically relative to where it is um at the start of the animation so um do vertical position as part of that and run this again and let's watch it goes down goes back up and auto reverses so if i commented out that whole vertical position here um you can observe what it looks like and see how it's going from up there because it thinks it's from zero to 100 so we've done position dot x and y how about transform scale and rotation just just for the heck of it so i'm just do a grab fade or the opacity one we'll just reuse that we'll read up that as transform dot scale and we'll just call this scale and rename the variables here and here for the values um hmm i'll do it we'll start off at one which means full scale we'll scale down to zero dot one or 10 percent of the original scale it will scale back up to one dot zero we'll do this from zero dot six to one so basically kind of towards the end of the animation to one dot oh it's going to scale down and scale up real fast and um before we do so we can add that to the group so we go down here and add the scale animation to our array of animations and then for the final one we'll just do the rotation one so that's real simple it's just transform dot rotation and all we'll need to do is just change the key times and the values i will try for the values is a little different here because it's not just it's going to be doing something like rotate it by pi so i'm going to do zero to pi it's going to be our rotation or just one complete rotation of the square um i'm going to do from zero dot six to one as well so it'll it'll trigger right when the scale happens i'll just call this rotate and i'll change these scale names to rotate and add that to the collection of animations and let's run it and see what all of these look like together goes down you see there's the rotation in the scale back up and back over and fade out and so that'll run forever um based on how i define the group and this is really something that you can customize and tailor i mean you could create a complex sequence of animations maybe your app does something when you load it or you log in you you log out whatever um you can do a lot of that fancy stuff inside of an animation group and then you can load up your group and just run that right and it's it's just a combination of different things going on in here so there's a lot of ways you can be creative in this and how it impacts your overall user experience in your app just summarize this is really another way to do exactly the same thing that we did in tutorial one it's just this is using core animation directly um and the benefit of this that i think is a nice area is that you can you can kind of control things a little bit tighter outside of running things in blocks now blocks are great and you can use those um in certain situations but if you you really want to define like a custom animation group that's composed of you know these four or five things that have all these certain configurations that specify an animation well you can create that group you can control that in your code and you can call it on the right at the right time to use it and not have to have clunky blocks kind of filling up your your um your methods in your code because you've already maybe constructed it once and you can just add it and remove it and it'll do its thing so that's why i i like you know interacting with the animations this way and it's a little bit more uh lower to the api but again the blocks there's nothing wrong with the blocks based approach um it's good for simple things but the more complicated you get you may want to consider um diving into using some of the ca animations directly and that wraps up this lesson so hopefully you found this helpful and you can see opportunities in your app where you can apply this and where you can really add some special effects and make some cool animations that make your users want to come back and really promote your app and promote your brand so if you found this tutorial helpful you know what to do smash that like button and consider subscribing to code pro to stay up to date for all the latest tutorials make sure to follow code pro on social media you can find me on facebook and on twitter and let me know in the comments section down below if there's any special requests for animation tutorials in particular because i am kind of diving into this whole animation topic and any questions or requests that you guys have um i would definitely consider in creating future tutorial content going forward thank you so much for stopping by and i will catch you in the next one hey if you made it this far you should consider subscribing to code pro press that red subscribe button down below to be notified for all my future tutorials and content also make sure to check out my patreon page patreon supporters receive early access to future tutorials as well as access to source code for each youtube tutorial and access to my full length ios development courses