Animating With Snap.svg

5.6 Staying Current

Hello, and welcome back to animating with Snap SVG. Now that we know how to convert our hours, minutes, and seconds into degrees of rotation, now let's talk about how to keep our clock up to date. Right now, our time is only accurate as soon as the browser loads. One second later, it's already off, so we need to create some kind of loop that's going to keep checking the time and keep updating the clock accordingly. So let's start again by creating a new copy of our site18 folder, and we'll call this new copy site19, and all of our progress will be saved there at the end of this lesson. So we'll open up our site19 folder and get started. So we've got our main.js file, which is where most of our logic is right now. And we've created some transformations here after pulling the current time. And now we need to pull the current time once per second, so we're gonna create a loop that's going to do that for us. So we're going to do that using the JavaScript method called set interval. And we're gonna do that up here in our call back function. Right now, we're just calling the show time method once. Now we're gonna call it over and over again. So I'm gonna create a timer. So we'll create a variable here. I'm gonna call it timer, and we're going to set this equal to, again, the setInterval method, you'll notice that the I in Interval is capitalized. And then in parentheses, it's expecting two things, it's expecting the function that we want to run over and over again at that interval, and then the duration of that interval. How long do we want to wait in between intervals before we call the function again. So, the function we're calling is showTime, and the interval is gonna be one second. We're going to call it every 1000 milliseconds, or basically, every second. So now, we no longer need showTime here because we're calling the showTime method over and over again right here. So let's save our JavaScript file, jump into our browser and navigate to the site19 folder and see if it works. And sure enough once per second our time is updating, and it's displaying the accurate time. We can see the second hand moving around, and once that second hand gets all the way around to the top we should see our minute hand move forward. So I'll pause the video. We're not gonna wait an entire 30 seconds for that to happen. I'll pause the video and then we'll see that happen. Okay, so we've got about ten seconds left. And hopefully when our second hand is pointing to the top, we'll see our minute hand over here rotate to the next minute. Let's watch that happen, and there we go. So we see that it works just fine. Now as it is, our hour hand is only gonna move once every hour. It's just gonna move down to the next hour, so that's gonna be kind of a jerky animation. We're not really animating it just yet. We're really just updating the screen once per second. In the next lesson, we're gonna talk about how to actually animate this rotation instead of just jumping from one frame to the next. But until then, let's just make sure our files are saved. And I'll see you in the next lesson. Thank you for watching.