2.5 Shape Transformations
Up to this point, you’ve learned how to master the creation of shapes in Snap.svg. In this lesson, you will learn how to apply some transformations to those shapes. This will be a crucial step in learning how to animate them.
1.Introduction2 lessons, 08:34
2.Creating Graphics in a Snap5 lessons, 39:51
3.Animating in a Snap3 lessons, 18:17
4.Basic Interactivity5 lessons, 31:21
5.SVG Clock Animation11 lessons, 1:10:14
6.Conclusion1 lesson, 00:54
2.5 Shape Transformations
Before we get started animating our shapes, we need to understand transformations in Snap svg. And I want to talk specifically about three types of transformations. I want to talk about translation, scale and rotation. And they're all pretty easy to understand, translation is moving something around within the SVG. Scaling is making it larger or smaller, and rotating it is just what it sounds like. It's rotating an item around a certain point. So let's start by creating a new copy of our work we've done so far. And I'm going to say this as site06. And will drag that site06 folder down to our brackets icon and open up index.html. So here we have our house animation that we've already worked with so far. If we jump back to our browser and navigate to site06/index we can see our house there. And let's talk about resizing the house. Let's say we want to make it a little bit larger. The way we would do that is we would first point to the item we want to transform. Which in this case is the house itself, the whole house. Remember that house is actually a group. We grouped it all together up here, the base and the roof and then we also added the chimney here. So that house is a group and we want to transform that group, so we're gonna call on the .transform function. So inside this function we need what's called a transformation string or a transform string. And there is a combination of letters and numbers here to make this transformation happen. For the letters, we're going to use either t for translate, r for rotate, or s, for scale. And then the numbers will depend on which item we choose. So for example, if we decided to scale our house down a little bit, inside the parentheses for transform. We need this to be a string, so we're going to put it inside single quotes, or double quotes, if you prefer. And if we want to scale this, we're going to type s and then the value we want to scale it to. If we type s1, that's gonna scale it to it's original value. In other words, it's not gonna scale it at all. If we were to save that right now and jump back into our browser and refresh, nothing changes. But if we were to increase that number to, say 2, then it will scale up to twice its normal size. So if we save that and refresh, now you'll see our house gets a lot bigger. So as you can imagine, if we want it to go down to half its original size, we would go down to 0.5, or we could just type .5. Save that and refresh and now we can see that it's half its original size. We can go down further, 2.25, say that and refresh and now it's down to a quarter of its original size. So that scale number is a ratio. Now, you might have noticed that when we scale our item, watch the transformation point. If I were to refresh the page right now, you'll see that it scales out from the center. By default, the transformation point for that item is right in the center. If we wanted to scale it up from the upper left-hand corner of the SVG, for example, then we could add a couple more values in here. So if we were to say s2, we want to scale it up to twice its normal, actually you know what, that's gonna make it too large. Let's do s.5, we'll scale it down to half of its original size. But we wanna scale it from the upper left hand corner, or using the upper left hand corner, as a transformation origin. In order to do that we simply need to enter in the x-y coordinates there. So we can type comma, zero, comma, zero, and that's the x-y coordinate of the origin. So if we were to say that, and refresh, then you'll notice that it not only scales down, it also moves in the direction of that origin point. If we were to scale it larger, then it would move away from that origin point As it scales up. Now if we wanted it to scale up from the top left corner of the house itself, instead of the top left corner of the whole SVG, we could do that. We could point to instead of 0,0. We could use the original xy coordinates for the base of the house for example. So we could scale up from the top left corner of the base of the house which was at in xy coordinate of 5100. So I'm just going to copy that. And paste it here so we have 0.5,50,100, save that and refresh. And it's kind of hard to see what it's doing there but if we scale back up to one, save that. You'll notice that it will scale up from this point right here are my mouse cursor is. If I refresh it, you'll see that portion of the house stays in the same spot. So we can move that translation or origin point. Wherever we want to move it. So that's scaling an object let's talk about translating an object. To translate an object we type the letter t, and then we type where we want it to translate to. So if we wanted to move it over to an x,y coordinate of 100,100, save that and refresh. You'll see that it does just that. Now let's whittle that down to a smaller portion. Instead of moving the whole group over, let's just move the chimney so that we can actually see this in action. So we'll save that and refresh, and you'll see that it moved the chimney down into the right from where it originally was. And then for rotation, instead of t, we would use r. So we would type, for example, r45, to rotate it 45 degrees. Now let's see what that looks like. If we Save that and Refresh, you'll see that it rotates 45 degrees and it's rotating by default from the center of the item. And that again is gonna be easier to see if we rotate the whole house instead of just the chimney. Save that and Refresh, and then we see the whole house has rotated 45 degrees. Using the center point of the house as the origin of that rotation or the center point of that rotation. If we were to change that center point, for example, move it to the upper left hand corner. Let's see what happens. So if we added ,0,0 here, that 0 0 will serve as the x, y coordinate of that rotation. So if we save that and refresh, you'll see that it not only rotates it but it's rotating it from the upper left hand corner of the svg. So it's moving around that rotation point. And this will come in handy later on as we start animating our rotations. We might not always want our rotations to occur right at the center of the object. For example if you're creating a clock face which is what we're going to be creating later on, you will have a minute hand and an hour hand. And you don't want that minute hand to rotate from the center of the minute hand, or the rotation is going to look weird. You want to specify where you want that rotation to take place, or where the origin of that rotation is going to be. But that's how you perform basic rotations and basic transformations, you can actually combine these transformations. So for now let's set everything back where it was so we can get a good starting point. I'm just going to temporarily comment out this line of code, and refresh just to get it back where it was. So let's say we wanted to move and rotate the house. So we could do house dot transform, and let's start with the movement. We'll do t, and let's move it over 100 pixels, and we'll do 0. I won't move it up and down. I'll just move it to the right 100 pixels, and then I wanna do a rotation of 45 degrees, so I will immediately type an R. You'll notice you don't have to put a space there or anything like that. You just type an R. And then how much do you wanna rotate it? Let's rotate it 45 degrees. Now I'm not going to rotate it around a different point, I'm gonna leave it at the center of the object itself. So we're gonna rotate it at 45 degrees. And then let's also do a scale while we're at it. So we'll scale it down to maybe 0.5. Let's save that. Go back to our page and refresh. And there we go, our house has moved over. It has rotated, and we've scaled it down. So you can use any combination of transformations here simply by starting each transformation with the letter that represents that certain type of transformation. So we have t for translation, r for rotation, and s for scaling. And that's how you apply basic transforms to your shapes in Snap SVG. Thank you for watching, and I'll see you in the next lesson.