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:
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.
Thanks a lot.
I think, I am replicating efforts.
Post a Comment