13 June 2010

A Effect based SVG animation API

I am experimenting a new API for SVG animation. The approach is different, I am creating a API for a normal user who can understand in terms of "Effects" like fadein, fadeout,  flyin, flyout.
Here is the Syntax to code animation. I have just started, so I have added only two effect, flyin and changeFillColor.

Remember , Demo Only work in Opera browser, as It support Animation tags
Demo  --
Feedback Welcome

var player = new SvgArea("test" , {"height":800 , "width":400});

player.add("circle" , {
    'r': 50,
    'fill': "#0FF",
    'stroke': "#00F",
'stroke-width': 2,
    'cx': 100,
    'id': "mycircle",
    'cy': 100

player.Animate("mytext", "flyin",{

player.Animate("mycircle", "flyin",{

player.Animate("myrect", "flyin",{

player.Animate("myrect", "changeFillColor",{
     'fill':"black",//RBG value


Jeff Schiller said...

1) You should check out Raphael which already does all sorts of animation in its API

2) WebKit and Firefox 4 both support SMIL - you should always try to get your stuff working cross-browser.

Narendra Sisodiya said...

Thanks a lot.
I think, I am replicating efforts.