Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:2.8 hours
Snap 1
  • Overview
  • Transcript

5.2 Targeting Individual Clock Shapes

Hello and welcome back to Animating with Snap SVG. In this lesson, we're going to jump into our clock SVG a little bit more and start targeting the minute hand, the hour hand, and the second hand and applying transformations to them. But before we get to that, I wanna point something out for those of you who are creating your own graphics using Illustrator. So if you create some vector graphics in Illustrator and you save them as an SVG, you need to pay attention to the XML that's created. Now if you go into your JavaScript and start rotating things and animating things and everything looks fine, then you don't need to worry about it. But if you decide to rotate the minute hand, for example, and you set the origin point to 150 by 150, which is right in the center of our SVG here, but when it rotates it doesn't rotate around that center point, then you might need to look into your XML to see what the problem is. And if we go into our site14 folder, in fact let's go ahead and duplicate that, and call it site15. And we'll drag this new site15 folder down to brackets and then I want to take a look at our SVG file. So in the opening SVG tag near the top of your document you'll find a view box attribute. You want to make sure that the first two values of that view box attribute are zero zero. The second two attributes are going to be the dimensions of your SVG. But again, the first two are going to be very, very important, because if those aren't set to 00, then it's going to offset any transformation points, any origin points, that you decide to place on your transformations. So if you were to set an xy coordinate of one-fifty by one-fifty on a rotation, and this view box is not set to zero-zero, Then that origin point is going to be off a little bit and it's not gonna be rotating around the center of the stage. So that's one thing you need to keep your eye out for if you come across that, with an illustrator graphic that you've created, and the best way I've found, or the only way I've really found to fix it is to go into that SVG file in Illustrator, copy all of the graphics, just grab them all at once and copy them, then create a new Illustrator file that are the dimensions that you need. In this example, it would be 300 by 300, and then just paste your graphics into that new Illustrator file, and it should work for you. But again it's just crucial that these first two values are zero zero, otherwise your transformation origins might be a little bit off. So what I want to do with this video is first I want to give you a little bit of a homework assignment. I want you to practice targeting specific shapes within your svg file and applying transformations to them. So I want you to take This clock animation. And I want you to target each of the hands of that clock. So the minute hand, the hour hand, and the second hand, and I want you to apply a rotation to them. Now again, the origin point of these rotations is going to be the center of your SVG. So the origin is gonna be 150, By 150. But again I just want you to pause the video and go through this process yourself before I walk you through it, because you're only going to learn if you sit down and practice this for yourself. If you're just copying what I'm doing every step along the way and it's not going to sink in as well as it would if you were to go and do it yourself. Even if you make mistakes and don't get it right that's part of the learning process. In fact the more mistakes you make in the beginning the more you're going to remember the concepts once you correct those mistakes. So I want you to pause the video. I want you to jump into your HTML for your site15 folder. So we've already duplicated that and created a new folder. So let's go ahead and point to site fifteen/index. So again, I want you to pause the video. I want you to target the minute hand, hour hand, and second hand, and I want you to rotate them. I don't care how much you rotate them. I don't care if you reflect a certain time of day. As long as you apply a rotation to each of the three hands, and go ahead and make the rotations different so that you can see each hand individually. But once you do that, then come back to the video, unpause it, and I'll walk you through the same concepts. So go ahead and pause the video and we'll finish up when you're done. So I hope you pause the video, and I hope you've tried this for yourself because again, that's the best way to learn. But if you had any problems with it, don't worry about it, I'm gonna walk you through my process here. So again this is pretty straightforward. We've already covered this. In a previous video, we're just going to target a few shapes, and then apply rotations to those shapes. So we've now got our site15 folder, and we want to make sure that that's opened up in brackets. And once it's open up we can jump into our HTML file and get started. So we've already created our Snap object, which we called clock, and then we loaded the clock.SVG file into that Snap object. And then we appended all of that data, appended all of that SVG data, to that clock object. So the first thing I want to do is I want to select the minute hand, second hand, and hour hand, and store those in variables so that they'll be easier to access later on. So we'll skip a couple lines here inside the callback function for our load method. And I'll start with the second hand. So we'll create a variable here. I'll call it secondHand. And we're gonna set this equal to, first we need to point to our snap object, which we stored in a variable called clock. So we're going to point to clock.select. And then inside parentheses, just like you would with J query, we're going to use the CSS style selectors to point to the objects we want to access. So again if we jump into our SVG and scroll down we can see that we have the second hand, hour hand, and minute hand. So we have second_hand for the second hand. Let's copy that. Jump back into index.html. And we want to point to that ID. So we're gonna say pound. And then second_hand. So we'll do the same thing for the minute hand and hour hand. So let's just copy that. And paste it twice. And then our second one will be minute hand. And we'll go ahead and change that here as well. And our third one is going to be the hour hand. So we'll change that. So, now I just want to rotate each of these objects to make sure that we've properly selected them. The only way we can really tell if the right object is stored in these variables is to try to make transformations to them. So let's start with a second hand. We're gonna point to secondhand, and the way we make a transformation is we type .transform. And then inside parentheses, we're going to use a transformation string inside quotation marks, and we want to rotate it. And so we're gonna start it with r. And for the second hand, let's say we wanna rotate it 45 degrees. So we'll say r45 and then we need to put the coordinates for the origin of that rotation. And again, the origin is gonna be right in the middle of that svg file. So it's gonna be 150 by 150. So let's see if that works, we'll save our file, jump into our browser, and refresh the page. And sure enough, our second hand has rotated 45 degrees. So let's do the same thing with our minute and hour hands. So I'll go to the next line. We'll point to the minute hand. We're gonna do another .transform. And again, we're gonna do a rotation. So we'll say r, and this time we'll just choose a random number. Maybe 205 degrees. And we're gonna use that same origin point of 150 by 150. And there we go. Then we'll do the same thing for the hourHand.transform. And then inside, quotation marks here. We're gonna point to 'r' and let's put it at 30 seconds. We'll do 180 degrees. And then the same origin point, 150 by 150. And let's see if that works, so we'll save our file. Jump back into our browser and refresh. And sure enough, we've got all three hands rotated now. So we've got a pretty good start to our clock project. And in the next few videos we're gonna learn how to pull in the current time using JavaScript. And then we're gonna rotate our hands according to what time it is so that our clock will accurately reflect what the current time is. So thank you for watching and we'll get started with that in the next lesson.

Back to the top