Snap.svg缩放和动画SVG(Snap.svg scale and animate SVG)

Snap.svg缩放和动画SVG(Snap.svg scale and animate SVG)

我正在尝试使用g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0);扩展我的SVG g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0); 然后动画wheelAnimation(bbox.cx, bbox.cy, 1500);

var i = 0; function wheelAnimation(cx, cy, speed){ i++; g.animate( { transform: "r360," + cx + ',' + cy}, // Basic rotation around a point. No frills. speed, // Nice slow turning rays function(){ if(i == 5) speed = 5000; g.attr({ transform: 'rotate(0 ' + cx + ' ' + cy}); // Reset the position of the rays. wheelAnimation(cx,cy, speed); // Repeat this animation so it appears infinite. } ); }

但我的SVG没有扩展。 它只是旋转。 如果我删除旋转 - SVG缩放。 如何将其组合成立即缩放然后制作旋转动画？

Plunker的例子

I'm trying to scale my SVG with g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0); and then animate wheelAnimation(bbox.cx, bbox.cy, 1500);

var i = 0; function wheelAnimation(cx, cy, speed){ i++; g.animate( { transform: "r360," + cx + ',' + cy}, // Basic rotation around a point. No frills. speed, // Nice slow turning rays function(){ if(i == 5) speed = 5000; g.attr({ transform: 'rotate(0 ' + cx + ' ' + cy}); // Reset the position of the rays. wheelAnimation(cx,cy, speed); // Repeat this animation so it appears infinite. } ); }

But my SVG didn't scaling. It's only rotates. If I remove rotation - SVG scaling. How to combine it to immediately scale and then animate rotation?

Plunker example

最满意答案

我从未使用过Snap.svg，但您可以尝试这样做：

var i = 0; function wheelAnimation(cx, cy, speed, scale){ i++; g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup g.animate({ transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills. speed, // Nice slow turning rays function(){ if(i == 5) speed = 5000; wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite. } ); }

希望这可以帮到你:)

见Plunkr

I've never used Snap.svg but you might try this:

var i = 0; function wheelAnimation(cx, cy, speed, scale){ i++; g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup g.animate({ transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills. speed, // Nice slow turning rays function(){ if(i == 5) speed = 5000; wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite. } ); }

Hope this helps you :)

See Plunkr