Grauw’s blog

I updated the SVG example I made earlier, and it now shows a little more action :).

» Look at the updated SVG animation

More importantly than the additional visual effect, I am now using the SVG DOM for the animation, instead of manipulating an attribute, which was kind of an ugly approach.

This is the important part of the Javascript code for the animation:

var d2r = Math.PI / 180;        // degrees to radials conversion factor

function rotate(val) {
	val++;

	svg_transform1.setRotate(val*2,105,125);
	svg_transform2.setTranslate(Math.sin(val*8*d2r)*20,Math.cos(val*8*d2r)*20);

	setTimeout('rotate(' + val + ')',20);
}

The rotate function shown here takes care of the animation, and when it’s done it calls itself again after 20 milliseconds, with the increased val parameter. During the initialisation I made two transformation objects, and in this function I use the first transformation object to set the rotation of the blue blob to val*2 degrees around the x=105 and y=125 coordinates. The second transformation changes the position of the blob along a circular path as val increases. It’s as easy as that!