Swift Animations: Custom Counting Label - CADisplayLink

[Music] hey what is going on everybody welcome back to the channel hope you're having a fantastic day now in today's video or is lesson really I want to show you how you can perform some pretty advanced animations inside of your iOS applications and we're going to learn all about something called a CA display link so before I can actually tell you exactly what this is I'm gonna show you a demo as to what kind of animations we can achieve using a display link alright so I have set up inside of the simulator on the left side of the screen a application that is meant to track your steps your calories and also your ranking in an overall Fitness social media app so the moment I actually click onto the screen you'll notice all these numbers slowly start to count up to a particular digit right so at the very top here we have 12,000 and 538 and down here we also have a couple of different numbers so if you try to think about how you would animate this your first attempt might be to use something like uiview animates however the problem with that API is that you're not able to actually animate the text of a UI label so that it counts up from zero to a particular number UI view anime is only meant to animate things such as the frame the color the Alpha or maybe even the transform of a UI view so you wouldn't be able to achieve this animation using just UI view enemy okay so the question here is if we can't use UI view animate to perform this style of animation how exactly do we go about implementing this feature right well we can use something called a CA display link which is part of the core animation library and it allows you to hook into the display of your application and each time we refresh the display with a new frame we can actually tell the display and tell the UI labels here exactly what they need to be and so upon refreshing the display constantly we can just sort of set up these labels to be a different number over time hence achieving this animation over here alright so that's just a very simple application of the see a display link and if you get a really good at it you can actually implement some pretty cool tricks using it so for example this application over here is kind of a story or a book with a lot of different pages right and so if you look at the bottom you'll notice that the text animates from the left to the right and then it keeps going until it's all the way done so this animation is actually using a CA display link to fill up the text of this UI label over here until it's all the way done okay so now that you have a pretty basic idea as to what a CA display link allows you to do I'm gonna go over right now exactly how we can implement this animation inside of this application and we're going to kind of do it in three steps the first thing I'll show you is how to actually build a CA display link and then secondly we are going to develop our own animation that allows us to animate this guy from a start value of zero all the way up to a particular number and then the last thing is to actually teach it how long we want the animation to persist or perhaps a better way of saying that is to give it a duration for your animation all right so with that being said and let's go ahead and see exactly how to do this instead of Xcode right now alrighty everyone and welcome to the coding session for today's video the way we're gonna start off here is to simply create a brand new single view project inside of Xcode and that's pretty much what I have up and running right now and so this is my brand new project and the next thing we are going to do is to also run this project just to sort of confirm we get a white screen inside of the simulator right over there alright so everything looks pretty darn good this white screen is pretty much going to represent in this view controller file right over there and now that we have the basis of our project completed let's kind of talk about what do we need to build out in order to get this animation working alright so in other words I actually want to create some UI components and namely I want to create a UI label over here at the very top somewhere just so that I can actually start animating all right so that's the very first step in our project and I'm gonna do this kind of programmatically right on a line of 13 and so let's create a label I'm going to call it counting label you can feel free to call it whatever you want and just make it of a type UI label kind of like that and inside of this closure block so this is a closure block I'm going to create an instance of it UI label so set it equal to UI label I'm going to set some text on this as well so why don't we just call this 1 2 3 4 and then also return this label and this closure right here you can actually execute it and by using parentheses parentheses and this label is actually going to be set to the counting label over there all right so this error is going to go away and now we would like to see this 1 2 3 4 label inside of heart view controllers somehow and so this is pretty easy all you gotta do is to say view controller is view dot at subview and what only add this counting and label now if you try to run this you won't be able to see the actual label and that's because you don't have a frame on the label so I'm going to say counting label and on frame equals the entire views frame alike so all right so with that a little bit of code inside of our view controller file we're going to run and you'll see that we see one two three four all the way on the left side okay so pretty good stuff there and whatever I am prototyping my projects out I also like to Center outline things just to make it a little bit easier to read and while we're at it here why don't we change the font as well so UI font and I'm going to choose a bold system font of something like 18 relatively a large size so that it's much much more visible inside of the simulator and that looks pretty good to me so why don't we actually move on to performing some animation right now all right so the animation we are looking to actually build out is that right there and so if you try to do this using UI view animate it doesn't actually work and so let me actually show you what happens alright so down inside of you did load why don't we attempt to use UI viewer animate and you see all of these animation method calls let's use the most simple one up there the animation duration let's use something like 2.5 seconds it entered for that block and you can try to say self dot counting label dot text and try to change it to something like nine nine nine nine right and if you try to run this some of you might assume that the animation will start to count up because it's going to animate but as you can pretty much see nothing really happens the text inside of your label just turns into nine nine nine nine pretty much instantaneously alright so obviously that's not what we want and so the question here is how exactly do we perform this animation right so here is where the power of a CA display link will come into play alright so let me type out some of the code and first why don't I delete this because that's not all that helpful I'm going to create my as they create my CA display link here okay so the question is what exactly is a CA display link and how do I create it well this stuff is kind of hard to understand if you are not looking at the code directly so why don't I type it all out so display link is going to be created like that we are going to create it with a target of self and a selector and I'm going to use a selector of handle update and now the next thing we need to do is we need to create this handle update function down below so let's use add objective-c function and handle update it's not going to work if you don't have this so it's going to flag you with an error and it should come out momentarily and so you can see this guy over here I believe you have that that fix and somewhere down here it will add and that add Objective C alright so inside of the handle add a I'm going to say print one two three all right so if you try to run this is going to kind of compiled successfully and it's going to watch our application and so you're not going to see this print one two three inside of the console and there is a problem with our code currently but before we talk about that problem let's kind of go over what ACA display link is and so if you click on this guy you can look at the right side over here it says that it is a timer object that allows your application to synchronize its drawing to the refresh rate of the display so in other words the application is kind of refreshing at 60 frames per second or it tries to do that and as it is updating the display you can kind of tell it what to do inside of this selector function which is down here all right so that's kind of what a display link is I do encourage that you read through some of the documentation over here it's kind of hard to understand so I'm just going to skip it for the sake of today's video and show you directly how to work with this display link alright so the next thing we have to actually do here is to say display link and use this add function so that we can register this display link with the main thread so this run loop over here is going to say dot main for the main run loop and for the imodium just saying dot and use the default run loop mode which is the the mode to deal with input sources other than an S connection objects use that one and the documentation over here since that is the most commonly used run loop mode and don't be too concerned with what these actually are just make sure you use them and you should be fine all right so everything looks pretty good and we're now starting to see this print statement from line 33 inside of this console area below here so why don't we move on to actually doing something more useful with the handle update function as the screen is actually refreshing at 60 frames for a second so down here what I'm going to do is you can say something like you know print date like so and if you run this you'll see the date actually update in E console area which is more useful than the one two three and so 38 39 and 40 so it is currently about 10 o clock Pacific Standard Time so that's what it says for me something a little bit more useful is that to get these seconds out of your date objects so you can say date like that and something that you can do is to say time interval a sense now or maybe a better one is time interval since 1970 which is something that is pretty standard to use when you're talking about dates and now we can do is to just print out seconds over there or you can say self dot Counting labeled on text text equals let's use some string interpolation and I'm going to say seconds inside of this parentheses over there and so once I run this you'll see the label instead of your application slowly change over time so this is actually the amount of seconds since 1970 and obviously it counts up as time passes by and that's how you sir achieve this animation over here we're counting or pretty much counting this label up from zero and we're reaching a certain number that we're just specifying later on okay so that is pretty much the basic idea behind how we can use a display link to begin creating out this type of animation okay so with that being said why don't we move on to making our animation a little bit more useful right so in other words what I would like to do instead of this guy over here is to animate the label starting from a particular value let's say is zero and then increase that number all the way up to something large like 12,000 so that's what we are going to do right now and I'm going to actually modify some more code inside of my project and the first thing I'm gonna do is to add a property called a start value and set that equal to zero and the next thing is to declare the second value and set this to something large like twelve thousand all right so that's pretty good and now that I have the start and end values I'm going to modify handle update to actually say something like self counting labeled text equals let's say start value instead of there and while I'm here I'm going to say start value plus equals one two incremented every time the display refreshes with handle update so you see this guy over there you want to modify that hit the fix it'll change that to a var and let's try to run this now and you'll see what this effect has on the application and there you go you see that it starts at a really small number and it increases and it keeps going until the end of time so obviously that's not what we want if we change this something to let's see n value to 100 instead of 12,000 you'll see that it'll just kind of keep counting up and you know actually go past 100 right so the way we actually stop it is to do something like this so if start value is greater than and value we will just say start value equals to let's say and value and what will happen is it'll never go beyond the end value so it might go over 101 but you'll see that it says 100 right there and it stops all right so pretty good job there and that's kind of how we animate our labels starting from a particular start and then we actually ended at some value all right so the next thing we actually needs to accomplish here is to somehow determine the animation duration so let's say I want to end this within 0.5 seconds right there's really no way of doing that right now and if we change the end value to something like 1000 and we also want to end the animation like let's say after 1 second then this guy is going to take a really long time to reach that so why don't we try to fix that using a little bit of code and the way I'm going to do that is to go over here and I'm going to declare another variable so this guy is going to be animations start date and set that equal to the current date which is right now so what this variable over here is going to actually equal is every time I run the application it's just going to be when the application starts or when this view controller is instantiated and so that's what this variable is it's just going to help me keep track of when the actual animation started and so with this guy declared I would also like to declare a second variable and let this guy be lets say animation duration it makes more sense and I'm going to use one point five seconds for the animation all right so with that being declared how exactly do I make use of these two properties well I'm going to show you a different trick inside of handle update and I would like to actually calculate the percentage of time that has passed since the animation has started so I'm going to do something right over here so I'm going to say let's now equals date so that's going to be the current time and you can actually say nail dot time since some kind of other date and I'm going to use the animations start data over here so this guy is actually the elapsed time so I'm going to say elapsed time equals that so you lapse time and finally you can maybe say self dot counting label equals or a dot six equals the string interpolation the elapsed time so once you read that you'll kind of see what the label will say instead of the center over there and there we go this is actually the amount of time that has passed by since the animation has actually started alright so pretty good stuff and the way I'm going to make use of this is to make a calculation of the elapsed time based on the animation duration just to kind of get a percentage going here so let's say let percentage equals elapsed time divided by animation start date and so I don't believe I can actually do that because I don't want to use that I want to use animation duration instead okay so I believe one of these properties needs to actually be a double so let's just use a double for animation duration these values over here I believe default to a float so once you run that again you will get the application to compile alright so I'm going to cut this over here and paste that over here and just use the percentage instead and now I will try to run my application so you'll see this label of your account from 0 to let's say a different value and this is actually the percentage that has passed by in terms of the elapsed time okay so the final thing that we actually needs to do here is to make sure we create the correct calculation so let's say it lets a value equals percentage and I'm going to multiply this by the end value and let's just subtract the start value so that we can get a thousand in this case and the next thing we would like to do is to say self counting label I'm just going to copy that and paste that over here make sure the indentation is correct and just said that's value like so let's say if you try to read this you won't be able to get this working because all of these values over here are its I'm going to change these to double so I don't have to cast it down below and now I can run my application and you'll kind of see what happens over here you'll see that it starts off as some kind of value right so that is coming from 0 all the way up to a thousand and after a thousand it actually keeps on going so that's kind of the final fix that we have to introduce inside of this guy and the way I'm going to do this is to perform and if check over here so let's say if in elapsed time and if it's passed one point five seconds which is our animation duration we are simply say self counting label dot text and we're going to set this to the end value I believe that makes sense again some string interpolation with the end value and otherwise we perform this calculation down below and now I will run my application and you will see that the animation starts at zero and animates all the way up to a thousand okay so I think everything is looking pretty good to me why don't we test our animation a little bit further by increasing this over here to three point five seconds and when you run this app right now you'll see that the animation is a lot slower so there you it slowly counts from zero to a thousand now one problem that you will have is let's say you want to count from 500 to 1000 and you run your app right now you're going to see that I believe it starts at 0 still or it starts at yes starts at 0 and you really wanted to start at 500 the way you fix that is to go instead of here and the value you actually want to add these start values to all of that and this is just a basic math that you have to watch out for if you don't understand it right now just look it over and think about it for a couple of seconds and you should be able to understand it and so start value of 500 make this guy up to let's say 900 and you'll see the animation is a lot slower and it completes at a full 3.5 seconds so you know one two three and point five there we go 1000 so everything looks really really good whoo I think that's gonna wrap it up for today's video now I'm gonna issue two different challenges for you to sort of tackle here now the first challenge is to actually remove the display link after the entire animation is complete and then the second challenge is to somehow figure out how to animate text from left to right sort of like the demo that you saw at the beginning of today's video now if you enjoy what I do on this channel and you also want to learn more about so if development you can support me and what I do by checking out the couple of courses using the links in the description below if you want to down the source code for what you saw in today's video you can by the source and link down below as well that's gonna be it for me today I will hopefully see you in the very next video bye bye guys

Channel: Lets Build That App

Views: 30,494

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: b3kZH1vfG2U

Length: 21min 42sec (1302 seconds)

Published: Thu Jun 21 2018