![]() ![]() We could go to negative 180 degrees, and as it refreshes we see that it moves the other direction. And we could go backwards here if we wanted to. So that's how we would animate an item using old-fashioned rotation. And hopefully that animation, there we go, makes a lot more sense. Origin with a capital O, and we're gonna set this equal to a value of center, space, center. So at the end of this line we're gonna hit comma, go to the next line and type in transform. So once it gets off the screen we can't really see it so we want to change first of all the transform origin of that item. Inside quotation marks and we saw that ring just kind of take off and it's rotating around the upper left hand corner. So let's say, we want to animate it to a value of 180 degrees, so we would type 180 deg. We're gonna animate ring zero one, we want to last maybe I don't know five seconds will put the properties inside curly brackets just like always and here we're simply going to animate the rotation of our object. We're just going to do a simple TweenMax.two. So the old fashioned way of doing animation in TweenMax is we do Tweenmax to or from, or to from, or from to I'm sorry or whatever you want to do. We're gonna put that selector inside quotation marks pound ring zero one. So in our JavaScript for now, I'm gonna create a variable to store our first ring, and we're gonna call that variable ring zero one since that's the ID of that particular group and we're gonna set it equal to using JQuery here. And we don't need to worry about CSS here, so we can collapse that all the way and just focus on our JavaScript. So before we start talking about directional rotation, let's talk about just a regular rotation animation. In the center, and then we have just the circle in the center, which doesn't really do anything. And so on and so forth, so we have a ring zero one all the way down to ring zero five. This is the outermost ring and it has several paths assigned to it, each of these paths represents a different segment of this ring, but the whole whole ring all the way around is inside one group with an ID of ring zero one and then we have ring zero two which is the ring just inside that. ![]() We have a series of rings that we're going to rotate separately and each one of these rings starting with the outer one gradually moves inwards and again we're gonna rotate each of these rings separately and if we look at the HTML for RSVG, we can see this group here for example, a group in an SVG is indicated by this G element here and you'll see that this one has an ID of ring zero one. file, and in this SVG which I created in illustrator. In our starting pen here we have a simple as V.G. So here in our starting pen, which you can find the URL for it in the course notes. We're really just gonna be using the rotation property but it's the way we set the value to the rotation property that marks it as a member of the directional rotation plug-in. We don't have a special property that we're gonna be setting and we don't have an extra JavaScript object that we're gonna be creating in order to house all of the properties that we need. We don't have to create a separate script tag for it also when we use the directional rotation plug-in, there's really not much of an indication in the code that we are using it. In this lesson we're gonna start to take a look at the directional rotation plug-in and this is one of those plug-ins that does not require you to explicitly point to it in your HTML code. Hello and welcome back to advanced animation with G.S.A. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |