How to write Kickass Animated Circle Progress Bar (Ep 1)

hey what's going on everyone and welcome back to the channel hope all is well with you today now have you ever wondered how to use animations inside of your iOS applications or have you ever struggled with animations inside of the Swift programming language well in today's video I'm gonna go over how to use something called a CA basic animation class that allows us to animate things very nicely and very easily inside of our iOS apps alright so before we begin today's coding session let me give you a rather quick demo as to what we're gonna be working on in today's video here so I have the iOS 10 iPhone 10 simulator on the your right side setup and I'm going to click on the screen and this is going to initiate a file download of a 5 mega byte file from the internet so this is a circular progress barn that allows us to track the amount of bytes that we've downloaded so far of that 5 megabyte file and down in the center right here it kind of tells us how far along our download has gone for it so a pretty nice stuff and we also have a nice pulsing animation that's kind of in the background there it's a little subtle I definitely adds a nice touch to your application if you wanted to add something in like this ok so what's nice about learning how to build out something like this is that it allows you to use a very similar technique to create three charts that kind of look like this over here so if I click on the screen it animates all of these charts to 50% 100% and 33 percent at the very bottom so imagine you're building out some kind of application that monitors how many calories you've eaten for the day right you can have 50% up here and maybe you are also tracking how many steps you've taken for the day if you ride 100 percent then you can use the middle chart like that ok so in today's video we're gonna look at how to build out these two features using AC a shape layer class as well as a CA basic animation class and luckily for us these two classes are very easy to work with so let's take a look at the implementation inside of Xcode right now alright so let me take you into my brand new single view application project right here instead of good and I'm going to run my a little bit of code here to show you a blank white screen inside of the iPhone 10 simulator and that's exactly what we get so a pretty good start here and I'm going to start by drawing a circle into my screen here so let's start by drawing a circle somehow and how are we going to do this is by using something called PC a shape layer so let's say some let shape layer equals C a shape layer like that and we will use a blank empty constructor so eventually down here I'm going to add it into the view controllers view which is this white screen over here with view layer add sub layer of this shape layer from above okay so if you run your code right now your similar is not going to render anything because the shape layer hasn't been properly set up yet so you get this white screen and the first bit of information that you need to give the shape layer is the path in which it needs to kind of draw itself so you can say its shape layer path it needs to equal to something so I'm going to declare this path above with let's circular path equals something and I'm going to use a UI bezzie a path hopefully that's how you pronounce this word and let's use the constructor with center radius angle end angle and clockwise so I'm going to specify a clockwise equals to true and you see this application over here if I click on it it animates clockwise in that circular direction okay so that's what that parameter allows us to do and the center over here I'm going to just draw it inside of the views Center so you can you know do something like this let's enter equals the view Center and use this Center for their first parameter and the radius I'll just use a kind of the hard-coded value of 100 the start angle is going to be zero and the N angle is something that you'll have to learn for today's lesson and basically for circles we have zero starting from right here and if you draw 2 pi you'll get all the way around if you just draw one pi you'll get to 180 degrees so let me show you what that looks like with C flutes like that and dot pie okay so now with our circular path defined we can specify that for our shape layer path over here and when the last thing you have to do is to add cg path to the end of your circular path and that's because this path over here this parameter expects a cg path like so alright so if you render out your circle you actually get half a circle and that's because like I was mentioning over here you need two pi to get all the way around to get a complete pi or a complete circle rather and so running our application now we get a full black circle alright so really good stuff there and if you don't fully understand the PI logic here make sure to kind of study up on trigonometry I think that's where we learn these concepts here okay so now what I want to move on to you is how we can add this stroke path or this stroke highlight onto our circle and the way I'm going to do that is to go back into the code here and let's see what do I wanted to add on to the shape and layer here is something called a stroke color colored and you can specify it whatever you want here as long as you specify these cg color because stroke color is a cg color alright the next thing you need to do is this a shape layer dot line width I think and I'm going to specify 10 and this is going to stroke the circle with a line that is 10 pixels in width and that's what you get right there okay so being able to draw our circle is pretty good but what's even better is to be able to animate our circular stroke and I'm around the circle like that and the way I'm going to do that is to add a tap gesture onto the view controllers view so that I can execute some code and I'll do that down below with a view let's see add gesture recognizer of UI tap gesture and let's construct this with a target of self the action will be pound selector and let's see and I'll tap as our custom function which I'll define herewith function handle tap and just hit enter like that now inside us with four you have to specify these selector functions with Objective C to get it to work and while we're here we'll just add a private to it and everything should be okay so let me say print you know attempting to animates stroke like that and run our application right now so I always execute these print statements just to make sure my code is working the correct way so tap tap-tap we get these console print statements down below okay so now what I want to do is actually execute this animation like that so how I'm going to do that is to use something called a basic animation so let basic animation equals C a basic animation and this comes with a constructor that allows us to use something called a key path here so what exactly is the key path well it is the thing that we actually wants to animate on this shape layer so there's something on this shape layer called stroke ends and let me just type down here dot stroke and I'm going to specify that equal to zero and let me just comment out this code and if you run your application now you'll see that these stroke is now gone so all we have is that black circle and what I'm going to do is use this animation at the bottom so specify the key path to be stroke and that's not how that looks like so stroke end and down below you can say basic animation dot two value equals to one okay so that's how you animate this stroke and property and finally you just have to add this animation on see the shape layer over here but because we are in a different function we don't have access to this shape layer anymore so what I'm going to do is to cut this line right here and just move it to the top of the class so that we can access it as a local property okay so down below inside of the handle town let's just say shape layered and and right here we have add animation of course I'm gonna have string so this animation is that over there the basic animation for the key you can just specify some kind of custom string so I'm gonna say your so basic and just leave it as that and run our code right now and hopefully the animation of our stroke and we'll draw our stroke in a circular fashion like that so you just kind of see it for a very very split quick second and the way that you would kind of see that a little bit better is to change the animation duration so basic animation duration equals two seconds perhaps and let me run the code now so I don't really exactly know what the default value for duration is but I think it's either 0.5 seconds or 1 second or something so click on that you see the animation very very clearly now at the very end of the animation you want these strokes you kind of stay and let me show you how to do that with basic animation dot i think as filmer equals fill mode for words like that and then basic animation dot remove on completion equals to false like so so let me run that right now basically this property right here tells the animation to not remove the entire I guess stroke and equal to 1 so it stays there and I'm not exactly sure what this does but you need this line in order for the animations to stay at the very end ok so now that you have your animation set up it's time to customize a couple of the different properties of this stroke here and the first thing I want to modify is the start point in which this stroke is kind of beginning at so I wanted to start at the 12 o'clock position instead which is all the way up at the top instead of the 3 o'clock position okay so I'm going to go back into the viewdidload function and instead of here we have to modify these start angle and the way to get it to start at 12 o´clock is to bring it back a couple of degrees so I'm going to say let's see negative CG flipped pi / it - and just run my application again so PI if you remember correctly it's 180 degrees so we're just going to bring it back 90 degrees to the top right over there and that's what we get so one minor detail about how this line is kind of drawn at the beginning and end is that you see it's kind of this hard rectangular shape let me just expand this it's kind of this hard line right and inside of the finished application this is a much nicer kind of beginning and end point of your line so let me show you how to do that by going back to the shape layer right here's a shape layer and then I believe it's called wine cap and this is a see you around see see a lion cap around like that and you should be able to get a nicer stroke inside of your circle so hopefully that works and we will see what happens when the application loads up click on there you see it's a nicer round soft end to your line so that's pretty good and one thing that you do want to know how to figure out how to do is to remove this black center in the middle and so the way you would do that is to go back to the shape layer one more time and just somewhere over here you want to say fill color I think you can specify this as you I colored clear and again make sure you use the CD color instead of just a regular old color so this gives you UI color this gives you CG color and this is what it's expecting so you click on that now you see just the stroke without the fill in the center all right so everything with our application works perfectly so far however there is one more thing that you can add to it just to make it a little bit better and that is this circular track layer that is right below the stroke for example the green yellow and red right here and there's this little rim that the stroke actually animates around so I'm going to drag this out of the way first and show you how that is done by just copying some code over here so let's see what I want to copy so I'm going to copy all of that and over let's see over here I'm going to create my track layer so copy and paste of that and let's just say a let's track layer you go see a track layer and that track later but shape layer constructor like that copy this paste that in there there there there and there I don't think I need this circular path down here because I haven't defined up here so just hit the space right there and I should be good to go and all I need to do is save you down layer dad suppler of this track layer first and I need to also specify some kind of stroke color that is different from this red so let's just use light gray for now and I should be okay so I don't think I need the lion cap but let's just run our code first to see what it looks like and I should have a circular gray layer right here and the moment I click on it you see that they're red kind of animates right over that all right that's gonna be it for today's video on how we can execute a circular animation using AC shape layer and also a CA basic animation class now I hope you found today's video helpful if you're interested in more Swift development lessons you can check out the Instagram firebase course down below finally make sure to leave a thumbs up for the video if you enjoyed it and also subscribe to the channel if you haven't done so already that's gonna be it for me today I'll see you in the next video about everyone

Channel: Lets Build That App

Views: 114,928

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code, cabasicanimation, cashapelayer, stroke

Id: O3ltwjDJaMk

Length: 14min 42sec (882 seconds)

Published: Sat Dec 09 2017