SVG + Animation

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.