SVG + Animation

Jul 4, 2006dojo svg

Dojo has developed the dojo.animation.* framework for simple animation development. What if we combine the power of Animation and SVG? Here we go:

jc = new dojo.animation.Animation(
  new dojo.math.curves.Circle([dx, dy], 150),
  8000,
  0,
  -1,
  25
);
dojo.event.connect(jc, "onAnimate", function (e) {
  jupiter.setCircle({ cx: e.x, cy: e.y });
});

This snippet is quite straightforward, we specify the animation trace(circle), duration(8000ms), acceleration(0), repeated times( -1 stands for forever), then build the animation object; hook the onAnimation to the callback function. Done!

onAnimate event will generates the coordination according the trace, we then manipulate the SVG object’s position in the the callback function. Check out the example for the synergy of two. You need Mozilla Firefox 1.5+ to watch the animation.