|
|
 |
home <%=sCrumb%>
|
|
Animation with Javascript in SVG by Chris of the Southern Elves
There are two ways to animate your shapes in SVG (that I know of, there may be more). One is the built-in animation properties and paths of objects (described in the W3C SVG spec here) and the other is done by using JavaScript "setInterval" function. I'd like to discuss the second one, plus some ideas about changing SVG "path" objects over time ("tweening", in Flash terminology) here.
When I wanted to animate the many paths of my cone segment objects I used the "setInterval" function. To do this, you choose a set of starting values and a set of ending values, then you do a timed "percentage interpolation" between them.
//Code sample I - timed interpolation (motion tweening)//
var startX = 50;
var startY = 50;
var endX = 100;
var endY = 100;
var percentageMoved = 0;
function callMeFirst() {
percentageMoved = 0;
timerId = setInterval('moveItem()',25);
}
function moveItem() {
percentageMoved += 0.1;
if (percentageMoved > 1)
clearInterval(timerId);
else {
var item = document.EmbeddedSVG.getSVGDocument().getElementById("movingItem");
var x = startX + (endX - startX) * percentageMoved;
var y = startY + (endY - startY) * percentageMoved;
//for single objects
item.setAttribute("x", x);
item.setAttribute("y", y);
//for groups
//item.setAttribute("transform", "translate(" + x + ", " + y + ")");
}
}
//End Sample I //
In sample 1, we set up some variables that mark the starting and ending points of an object that we want to move. We have a "kick-off" function, "callMeFirst", that will get the party started. It will generally be called from an "onclick" event within the SVG or a separate javascript button in the page. The setInterval function calls the "moveItem" function 4 times per second (100/25) until a clearInterval call is made to its ID. Note that I reset percentageMoved to 0 here just in case the function is called a second time.
The moveItem function has two roles, first to perform the animation, and second to stop it. The animation is performed in the "else" case of the conditional, so let's go through that first. We grab our shape (or group) from the SVG. If I were moving a group, I would use the "transform" attribute (commented out in the example), but for a single object, I directly set the "x" and "y" attributes. We then take our original variables and add the difference (the distance) between the start and end, multiplied by our percentage factor, which is growing with each iteration of "move Item". Done quickly enough, this gives the illusion of the element moving smoothly across the screen, while it is in fact being redrawn at each step.
Once the animation reaches 100%, i.e. 1, we turn it off. Note that I say "> 1", since JavaScript has a little issue with floating points (like many languages) and a "== 1" will often not be called, as 0.1 can sometimes be interpreted as "0.09999999", which I remembered after a few frustrating minutes the first time I wrote this.
Here it is:
One thing to note here, in order to get the "hand" cursor for the button here, I put an anchor () tag around it, so it's treated as a link.
Chris
|
|
|
