Javascript Snap.svg缩放并设置svg动画

Javascript Snap.svg缩放并设置svg动画,javascript,css,animation,svg,snap.svg,Javascript,Css,Animation,Svg,Snap.svg,我试图用g.animate({transform:“s2.5,2.5,”+bbox.cx+,“+bbox.cy},0)来缩放SVG然后设置车轮动画的动画(bbox.cx,bbox.cy,1500) 但是我的SVG没有扩展。它只是一个旋转。如果我删除旋转-SVG缩放。如何组合它以立即缩放,然后设置旋转动画 我从未使用过Snap.svg,但您可以尝试以下方法: var i = 0; function wheelAnimation(cx, cy, speed, scale){ i++;

我试图用
g.animate({transform:“s2.5,2.5,”+bbox.cx+,“+bbox.cy},0)来缩放SVG然后设置
车轮动画的动画(bbox.cx,bbox.cy,1500)

但是我的SVG没有扩展。它只是一个旋转。如果我删除旋转-SVG缩放。如何组合它以立即缩放,然后设置旋转动画


我从未使用过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.
      }
   );
}
希望这对你有帮助:)

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