Menu

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  -- http://code.narendrasisodiya.com/svg/svg-animation/testanimation.html
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",{
   'dir':"right-top",
   'dur':"fast"
});


player.Animate("mycircle", "flyin",{
    'dir':"left-top",
     'dur':"fast"
});


player.Animate("myrect", "flyin",{
     'dir':"right-bottom",
     'dur':"fast"
});

player.Animate("myrect", "changeFillColor",{
     'fill':"black",//RBG value
     'dur':"slow"
});

2 comments:

Jeff Schiller said...

1) You should check out Raphael which already does all sorts of animation in its API http://raphaeljs.com/reference.html

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.