CODEWITHSUNDEEP
javascriptanimationsnap.svg
Li Dong
Li Dong

Reputation: 1108

How to animate SVG group as a whole?

I am using Snap.svg to make animation. I have two elements (one circle and one ellipse) to draw currently. The elements will translate together and the ellipse also rotate and change shape. I can use Element.animate() function in Snap.svg to animate each element, but it is very tricky to keep them transform harmonically. So how can I animate the elements as a whole? The html snippet is put on https://gist.github.com/dongli/8124267.

PS: The attributes cx and cy of centroid are not updated after each animation frame. I expect them will be changed.

Thanks for any help!

Upvotes: 0

Views: 4528

Answers (1)

Ian
Ian

Reputation: 13842

Snap provides a group function (also a sets, but group is a proper svg element, so I think typically preferred). So you have one group element and and perform one transfer can do something like this...

var s = Snap(400,400);

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red'});
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue',  });

var g = s.group(r,c);

g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );

Working jsfiddle here. http://jsfiddle.net/n8Een/2/ . If you're still having problems, pop your code on a jsfiddle.

Upvotes: 3

Related Questions