Question

我正在使用Snap.svg来制作动画。我目前有两个元素（一个圆和一个椭圆）。元素将一起平移，椭圆也会旋转并改变形状。我可以在Snap.svg中使用Element.animate()函数来为每个元素设置动画，但保持它们和谐地变换是非常棘手的。那么我该如何为整个元素制作动画？ html代码段放在https://gist.github.com/dongli/8124267上。

PS：cx的{{1}}和cy属性在每个动画帧后都不会更新。我希望它们会被改变。

感谢您的帮助！

Answer 1

Snap提供了一个组函数（也是一个集合，但是group是一个合适的svg元素，所以我认为通常是首选）。所以你有一个组元素并执行一次转移可以做这样的事情......

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 );

在这里工作jsfiddle。 http://jsfiddle.net/n8Een/2/。如果您仍然遇到问题，请在jsfiddle上弹出您的代码。

如何为整个SVG组制作动画？

1 个答案: