Snap.svg規模とSVG

Question

をアニメーション化するには、私はg.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0);と私のSVGを拡張して、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 example

Answer 1

私は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. 
     } 
    ); 
} 

希望、これはあなたが助け:)

See Plunkr